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Введение 


Случается, что проходит много лет, прежде чем человек поймет свое пред- 
назначение. Среди технологий, с которыми мне пришлось работать в начале 
1990-х, был неприметный язык сценариев под названием Јауа$Ѕсгірі. Вскоре 
я понял, что, несмотря на название, он не имеет ничего общего с языком Јауа, 
с которым я предпочитал работать в то время. Однако судьба снова и снова 
сводила меня с ЈауаЅсгірі. 

В конце 1990-х я решил остепениться и заняться работой, которая соот- 
ветствовала бы моему возрасту. И как-то само собой оказалось, что я стал 
руководителем небольшой группы, занимающейся написанием программ для 
управления окнами и планировщиков, а также решением некоторых других 
задач. Надо ли говорить, что основная часть программного обеспечения пол- 
ностью разрабатывалась на ЈауаЅсгірі. "Любопытно, — сказал я. — Ведь я ни- 
когда не стремился к этому". 

Со временем я перешел на более ответственную работу. Моей задачей 
было написание базовых средств для службы сообщений корпоративной си- 
стемы. При поступлении на работу было оговорено, что основным языком 
будет Јауа, но прошло немного времени, и незаметно моей главной задачей 
стала разработка пользовательских интерфейсов на ЈауаЅсгірі. Как ни стран- 
но, я все чаще стал слышать мнения специалистов о том, что Јауа$Ѕсгірі — 
достаточно серьезный язык и создание библиотек для него — перспективная 
работа. Вскоре мне пришлось ознакомиться с библиотекой х, разработанной 
Майком Фостером (Міке Еоѕѓег); о ней вы узнаете, прочитав данную книгу. 
Однажды при разборе почты мне пришла в голову идея принимать новые 
сообщения в скрытом фрейме и включать их в состав пользовательского ин- 
терфейса без обновления содержимого экрана. Несколько часов вдохновенной 
работы — и в моих руках оказался действующий макет системы. Более то- 
го, я придумал выделять новые сообщения цветом, чтобы привлечь к ним 
внимание пользователя. Придя в хорошее расположение духа от создания 
интересной игрушки, я вернулся к серьезной работе. Я не знал, что прибли- 
зительно в то же время Эрик Костелло (Егіс СомеПо), Эрик Хетчер (Егік 
Наѓсһег), Брент Эшли (Вгепі АзШеу) и многие другие воплощали подобные 
идеи, а в компании Місгоѕоќ шла работа над объектом ХМЕНиИрКеаце$ для 
ОпПооК МеБ Ассез$. 


Судьба продолжала направлять меня по одному ей известному пути. Моя 
следующая работа была связана с разработкой программного обеспечения 
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щя крупного банка. Мы использовали Јауа и ЈауаЅсгірі и применили на 
фактике подход с использованием скрытых фреймов. Группа, которой я ру- 
юводил, поддерживала более 1,5 Мбайт ЈауаЅсгірі-кода, как расположенного 
{ статических документах, так и генерируемого ЈЅР. Он используется при вы- 
юлнении банковских операций, суммы которых составляют миллионы долла- 
)ов. Среди читателей этой книги, быть может, есть те, счета которых управ- 
[яются данной программой. 

Тем временем ЈауаЅсгірі продолжал развиваться. В феврале 2005 года 
Джеймс Гаррет (Јатеѕ Саггей) нашел "недостающее звено". Он предложил 
:‚ороткое и запоминающееся имя Адах для инфраструктуры, объединяющей 
огатых клиентов, которые взаимодействуют с серверами в асинхронном ре- 
жиме, и ОНТМГ. Сочетание нескольких известных технологий создало усло- 
ия для программных решений, которые не были возможны ранее. 

Инфраструктура Ајах привлекла к себе внимание многих специалистов; 
ыли созданы Ргообуре, Кісо, Оо]о, аоох4доо, Ѕагіѕѕа и многие другие библио- 
еки. Мы попытаемся кратко проанализировать их в приложении В. Работая 
ними, я получил массу удовольствия. 

Ајах нельзя рассматривать как нечто завершенное. Данное направление 
родолжает развиваться. Через четыре месяца после написания первой главы 
астоящей книги мне пришлось существенно изменить ее. Несомненно, сле- 
ующие несколько лет порадуют нас новыми разработками в этой области. 
[ очень рад, что Эрик и Даррен разделили со мной труд и радость написания 
ГОЙ КНИГИ. 

Надеюсь, что вы, читатель, присоединитесь к нам в путешествии по увле- 
ательной стране, название которой — Ајах. 


Дейв Крейн 
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Сейчас, на момент написания данной книги, наблюдается бурный рост по- 
пулярности Адах, и мы рады, что можем рассказать вам подробнее об этой 
инфраструктуре. Однако, попытавшись сделать это, мы столкнулись с инте- 
ресной проблемой. Несмотря на свою популярность, ни одна из технологий, 
составляющих Ајах, не нова. Да и Ајах в целом — не технология, а скорее 
сумма технологий. 

Действительно, это так. В рамках Ајах собраны давно известные \- 
технологии, и их совместное использование позволило получить новые ре- 
зультаты. Изучать совершенно новую технологию в некотором смысле проще, 
поскольку мы начинаем с чистого листа. С Ајах дело обстоит по-другому: нам 
надо научиться видеть давно известное с иной точки зрения. Специфика Ајах 
обусловила структуру данной книги. Несмотря на то что технологии, состав- 
ляющие Ајах, относятся к клиентской части, различия между Ајах и клас- 
сическим УеБ-приложением затрагивают также серверные программы. 

Данная книга посвящена в основном созданию кода, выполняющегося 
на стороне клиента, поэтому бльшая часть примеров написана на языке 
ЈауаЅсгірі. Применение принципов Ајах позволяет разделить клиентскую 
и серверную часть приложения, поэтому для написания программ, выпол- 
няющихся на стороне сервера, может использоваться любой язык. Таким об- 
разом, данная книга будет полезна разработчикам независимо от того, приме- 
няют ли они для серверных программ РНР, Јауа, С# или Міѕџа! Ваѕіс. Кроме 
того, разрабатывая примеры, мы старались добиться относительной просто- 
ты серверного кода, поэтому вы можете без труда переносить их в требуемую 
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среду. Если же в примере встречаются решения, зависящие от конкретного 
языка, мы подробно объясняем их, чтобы разработчик, незнакомый с данной 
средой, МОГ ПОНЯТЬ ИХ. 


На кого рассчитана книга 


В рамках Ајах объединено несколько дисциплин, поэтому читатели могут 
прийти к пониманию данной инфраструктуры различными путями. Часть 
предполагаемой аудитории — это профессиональные разработчики корпора- 
тивных систем, имеющие ученые степени в области компьютерных наук, за 
плечами которых годы продуктивной работы над болыпими программными 
проектами. Их кругозор позволяет выйти за рамки уровня представления 
классического М№\еб-приложения. Другую группу читателей составляют М№еБ- 
дизайнеры, которые освоили "новую среду", изучив такие языки, как РНР, 
УіѕџаІ Ваѕіс, ЈауаЅсгірі и Асйоп$сире. Нельзя также забывать разработчи- 
ков приложений, перешедших от настольных систем к МБ, и системных ад- 
министраторов, которых в основном интересуют инструментальные средства 
управления на базе М№еб. 


Все эти категории читателей объединяет неподдельный интерес к Ајах. 
При написании книги мы попытались в той или иной мере учесть интере- 
сы каждой из этих категорий. Для тех, кто рассматривает \е6-браузер как 
низкоуровневый терминал, мы предоставили информацию об основных тех- 
нологиях У. Для тех, кто готов следовать сложившемуся стилю програм- 
мирования, мы предложили основные сведения о разработке и организации 
программного кода. Чем бы вы ни занимались ранее, вы должны знать, что 
Ајах — это объединение различных технологий и, изучая данную инфра- 
структуру, вам неизбежно придется столкнуться с новыми для себя вопроса- 
ми. Мы призываем вас расширить свой кругозор и повысить квалификацию. 
Мы сами делаем это постоянно; занимались этим мы и при написании данной 
книги. Затраченные усилия окупают себя, а результаты проявляются в раз- 
личных областях нашей профессиональной деятельности. 


Структура книги 


Книга разделена на четыре части. В части І вы узнаете, что такое Адах и по- 
чему вам стоит взять эту инфраструктуру в свой арсенал средств и приемов 
разработки. Здесь же мы расскажем об инструментах, которые упростят ра- 
боту и повысят вероятность успеха. Часть П посвящена базовым технологи- 
ям, составляющим Ајах, а в части Ш вы узнаете, как перейти от формули- 
ровки основных понятий к созданию реального программного обеспечения. 
В части ІУ мы перейдем к конкретным примерам: поэтапно рассмотрим осо- 
бенности работы над пятью проектами Ајах. Затем мы реструктуризируем 
код и выделим компоненты, которые вы сможете использовать в собственных 
УеБ-приложениях. 

Еще раз подчеркнем, что Ајах — это не технология, а скорее процесс. 
Поэтому в главе 1 мы постарались рассказать разработчикам, привыкшим 
к традиционным подходам к созданию УеБ-программ, о том, что им при- 
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дется столкнуться с совершенно новой методологией написания приложе- 
ний. Мы рассмотрели основные различия между Ајах и классическими Меб- 
приложениями, уделили внимание практичности программ и обсудили ряд 
других понятий. Если вы хотите с самого начала составить общее представ- 
ление о том, что же такое Ајах, мы советуем вам начать с этой главы. Если же 
вы выступаете в роли "потребителя кода", вам стоит сразу перейти к главе 2. 

Технологии, составляющие Ајах, давно известны, поэтому они хорошо 
документированы. Краткий их обзор, сопровождаемый примерами, приведен 
в главе 2. Мы излагаем лишь общие сведения о данных технологиях и отнюдь 
не претендуем на полноту изложения. Мы лишь отмечаем особенности их 
использования в рамках Ајах и специфику получаемых результатов. 

Глава 3 посвящена одной из основных тем данной книги — управлению 
кодом Ајах. Принимая во внимание тот фахт, что размер ЈауаЅсгірі-кода мо- 
жет превышать 1,5 Мбайт, трудно не согласиться с тем, что создание Ајах- 
приложения принципиально отличается от написания сценария для обычной 
У’еБ-страницы. В этой главе мы обсудим образы разработки и реструктуриза- 
цию. Эти вопросы освещаются не столько потому, что они важны сами по се- 
бе, сколько потому, что они применяются при работе практически над любым 
приложением Ајах. Мы уверены, что вы также возьмете их на вооружение. 


В главах 4 и 5 мы обратим ваше внимание на базовые компоненты Ајах 
и на особенности практического применения некоторых образов разработки. 
В главе 4 речь пойдет о создании простого для восприятия клиентского ко- 
да. Основным инструментом будет выбрана известная архитектура "модель- 
представление-контроллер". 

В главе 5 мы рассмотрим различные способы взаимодействия клиента 
и сервера и их соответствие требованиям инфраструктуры Ајах. В результа- 
те вы получите полное представление о работе всех составных частей Ајах- 
приложения. 

В главах 6-8 мы поговорим о том, что принято называть "доводкой" при- 
ложения. Вы узнаете, как обеспечить безопасность и практичность вашего 
приложения, работающего в реальных условиях. В главе б речь пойдет о вза- 
имодействии с пользователем, в частности, о том, каким образом следует 
информировать его о задачах, выполняющихся асинхронно. Необходимо ре- 
шить, следует ли предоставлять пользователю полную информацию о про- 
исходящем или держать его в неведении. В большинстве случаев приходится 
искать компромиссное решение, и мы покажем вам, как найти его. 

В главе 7 с разных точек зрения рассматривается вопрос безопасности 
Ајах-приложений. Технологии, составляющие Ајах, имеют непосредственное 
отношение к Мб, и многие из проблем, связанных с Ајах, типичны для лю- 
бых других У№еБ-приложений. Мы вкратце рассмотрим основные вопросы 
защиты и сосредоточим внимание на проблемах, специфических для Ајах. 
В частности, мы обсудим обеспечение безопасности при получении с серве- 
ра ЈауаЅсгірі-сценария и его выполнении, а также защиту точек входа М№еб- 
служб от несанкционированного обращения. В серьезных приложениях во- 
просы безопасности крайне важны, и мы предпримем основные меры для 
контроля над ними. 
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В главе 8 обсуждается еще одна важная характеристика приложения — 
фоизводительность. Недостаточное быстродействие или неоправданно боль- 
пое потребление памяти может стать причиной того, что пользователь от- 
сажется работать с данным приложением и предпочтет продукт, предлага- 
емый конкурентом. Мы покажем вам, как контролировать производитель- 
юсть программы и как анализировать код, улучшить его и обеспечить со- 
гласованность вносимых изменений в рамках приложения. 

В часть ТУ входят главы 9-13. В них мы рассмотрим несколько проектов 
Үјах. В каждом случае мы сначала обеспечим функционирование програм- 
ЛЫ, а затем реструктуризируем ее так, чтобы вы могли включить ее элемен- 
ы в свой проект, написав лишь несколько строк кода. Вы ознакомитесь на 
фактике с основными принципами реструктуризации и оцените преимуще- 
ства кода, пригодного для повторного использования. 

В главе 9 мы обсудим способы расширения возможностей НТМІ-форм 
средствами Адах. В частности, мы используем данные, введенные в поле, для 
5аполнения раскрывающегося списка. Чтобы это стало возможным, серверу 
тередается асинхронный запрос. 

Обсуждение вопросов модификации форм мы продолжим в главе 10. 
3 ней мы рассмотрим опережающий ввод, т.е. загрузку информации с сервера 
з ответ на ввод пользователем частичных данных. 

В главе 11 речь снова пойдет о расширенных возможностях пользователь- 
ских интерфейсов Адах. Мы разработаем портал, который, с точки зрения 
юльзователя, больше напоминает интерфейс рабочей станции, чем обычную 
уУеБ-странипу. В частности, пользователю будут предоставлены окна, кото- 
зые можно не только перемещать, но и изменять их размеры. В асинхронном 
эежиме выполняются действия по поддержке перемещения окон, в результа- 
те, завершив сеанс взаимодействия и зарегистрировавшись с другой маши- 
Ты, вы увидите, что внешний вид интерфейса остался таким же, как в конце 
Іредыдущего сеанса. 

В главе 12 будет разработана поисковая система на базе Ајах, кото- 
рая демонстрирует возможности ХЗГТ по преобразованию ХМГ-информации 
з форматированные данные. 

В главе 13 мы представим Ајах-клиент без компонентов, выполняющих- 
:я в фоновом режиме. Он по-прежнему взаимодействует с программами на 
стороне сервера, но в данном случае делает это непосредственно, используя 
стандартный протокол К85. 

Заканчивается книга тремя приложениями, которые, как мы надеемся, 
принесут вам пользу. В основном тексте книги рассматривались лишь техно- 
логии. Разработчику, обратившемуся к инфраструктуре, подобной Адах, го- 
раздо труднее подобрать подходящий набор инструментов, чем специалисту, 
использующему одну законченную технологию, например Ј2ЕЕ или .МЕТ. 
Инструментальные средства Ајах еще не появились, но мы уверены, что про- 
изводители скоро предложат их. Пока это не случилось, при работе над про- 
ектами Ајах можно применять инструменты и программные решения, опи- 
сание которых мы приводим в приложении А. 
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Приложение Б ориентировано на разработчиков корпоративных систем, 
которые разбираются в программах и принципах их разработки, но не очень 
уверенно чувствуют себя, применяя стандартные подходы при работе с гиб- 
ким и неструктурированным и, скажем прямо, странным языком ЈауаЅсгірї. 
Мы рассмотрим возможности языка и покажем, в чем состоят его основные 
отличия от ]Лауа и С#. 

Похоже, что с Ајах еще не совсем освоились не только поставщики инстру- 
ментальных средств, но и разработчики библиотек. При их создании надо 
реализовать (а в некоторых случаях и изобрести) совершенно новые реше- 
ния. В приложении В описаны известные на сегодняшний день библиотеки, 
приведены краткие описания и ссылки на каждую из них. 


Соглашения о представлении кода 


Исходный код программ представлен моноширинным шрифтом. Это позволяет 
выделить его на фоне обычного текста. При написании примеров для дан- 
ной книги применялись Јауа$сгірі, НТМГ, С55, ХМІ, Јауа, С #, Міѕџа! Ваѕіс 
.КЕТ и РНР, однако для всех языков используется одинаковый подход. Имена 
методов и функций, свойства объектов, ХМГ-элементы и атрибуты набраны 
одним и тем же шрифтом. 

Во многих случаях мы изменяли формат исходного кода: добавляли пу- 
стые строки и отступы. В ряде случаев некоторые позиции кода пронумерова- 
ны. Это делалось для того, чтобы конкретизировать описание кода в тексте. 


Коды примеров 


Исходные коды примеров, приведенных в данной книге, можно скопировать, 
обратившись по адресу һіїр://уүү.таппіпе.сот/сгапе. Их также можно 
найти на сервере һр: //ууүү.уіШатѕриб1іѕһіпе.сот. 

Создавая примеры, мы отдавали себе отчет в том, что далеко не у всех чи- 
тателей установлены сервер .МЕТ, сервер приложений Ј2ЕЕ. пих, Арасћһе, 
МуѕЅоОІ, РНР/Руіћоп/РегІ (АМР), и в том, что большинство читателей ин- 
тересуются только клиентскими технологиями. Поэтому мы старались созда- 
вать примитивные варианты кода, которые могли бы работать с фиктивными 
данными, размещенными на сервере любого типа: Арасһе, Тотсаї или П$. На- 
ряду с упрощенными приводятся также реальные рабочие примеры, поэтому 
при желании вы можете "померяться силами" с базой данных или сервером 
приложений. Некоторые документы, содержащие сведения об установке ос- 
новных продуктов, предлагаются для копирования вместе с кодом. 
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От издательства 


Вы, читатель этой книги, и есть главный ее критик и комментатор. Мы ценим 
ваше мнение и хотим знать, что было сделано нами правильно, что можно 
эыло сделать лучше и что еще вы хотели бы увидеть изданным нами. Нам 
интересно услышать и любые другие замечания, которые вам хотелось бы 
высказать в наш адрес. 

Мы ждем ваших комментариев и надеемся на них. Вы можете прислать 
нам бумажное или электронное письмо либо просто посетить наш Мер-сервер 
и оставить свои замечания там. Одним словом, любым удобным для вас спо- 
собом дайте нам знать, нравится или нет вам эта книга, а также выскажите 
свое мнение о том. как сделать наши книги более интересными для вас. 

Посылая письмо или сообщение, не забудьте указать название книги и ее 
авторов, а также ваш обратный адрес. Мы внимательно ознакомимся с ва- 
шим мнением и обязательно учтем его при отборе и подготовке к изданию 
последующих книг. Наши координаты: 


Е-та!й: шюЮ@\ИШатзра6 1$ т.сот 
ууүүүү: һёїр: //ууу.міШатѕриБ1іѕһіпе.сот 


Информация для писем: 


из России: 115419, Москва, а/я 783 
• из Украины: 03150, Киев, а/я 152 


Часть 1 


Новый взгляд на 
И/ер-приложение 


В этой части описаны основные понятия, лежащие в основе Ајах, В гла- 
ве | рассказано о недостатках классических УеБ-приложений и новом под- 
ходе к их разработке. Глава 2 посвящена технологиям, составляющим Ајах, 
и взаимосвязи между ними. Эта информация поможет вам лучше усвоить 
дальнейший материал и научиться писать приложения, более сложные, чем 
привычная всем программа Нео, Уо!9. В главе 3 представлены инстру- 
менты разработки программ и управления проектами и рассказывается, как 
применить их при работе над Ајах-приложениями. 
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И/ер-интерфейс 





В этой главе... 


Ы Асинхронное сетевое взаимодействие 
и образы использования 


. Основные различия между Ајах 

и классическими МеБ-приложениями 
. Основные принципы Ајах 
• Ајах в реальном мире 
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Слово "богатый" означает обилие возможностей, заложенных в модел 
взаимодействия. Эта модель предполагает поддержку разнообразных спосс 
бов ввода данных и обеспечение своевременного и интуитивно понятного от 
вета. Выяснить, является ли взаимодействие богатым, можно лишь путе! 
сравнения интерфейсов. В качестве эталона можно выбрать некоторые хоре 
шо зарекомендовавшие себя приложения для настольных систем, наприме] 
текстовые процессоры или электронные таблицы. Рассмотрим, что делае 
пользователь, работая с приложением. 


1. 1. 1. Действия пользователя при работе с приложением 


Оторвитесь на минутку от книги, выберите любое приложение (только н 
У\еБ-браузер) и попытайтесь оценить, какие варианты взаимодействия с поль 
зователем оно обеспечивает. Мы выбрали для этой цели электронные таб 
лицы, но вы можете использовать другое приложение, например текстовьи 
процессор. 

Готово? Тогда давайте обсудим вновь приобретенный опыт. Попытавшие] 
ввести несколько простых формул, мы обнаружили, что сделать это можн< 
различными способами, например, редактировать текст в строке, активизиро 
вать пункты меню либо изменять данные, перетаскивая их с помощью мыши 

В процессе работы осуществляется обратная связь, т.е. приложение обес 
печивает отклик на действия пользователя. Вид курсора мыши изменяется 
кнопки подсвечиваются, цвет выбранного текста изменяется, внешний вщ 
активизированных окон отличается от неактивных и т.д. (рис. 1.1). Именш 
такое поведение характерно для богатого взаимодействия. Так что же, про 
грамма поддержки электронных таблиц является богатым клиентом? Позво 
лим себе не согласиться с этим утверждением. 

В электронных таблицах и других подобных приложениях модель дан 
ных и логика их обработки функционируют в закрытой среде. Они могут бе: 
ограничений обращаться друг к другу, но внешний мир недоступен для них 
(рис. 1.2). Клиент же — это программа, которая взаимодействует с различ 
ными не зависящими один от другого процессами, выполняемыми обычно на 
стороне сервера. Традиционно сервер — это более масштабное приложение 
чем клиент. Обычно он обеспечивает хранение больших объемов информации 
и управление ими. Клиент позволяет конечному пользователю просматриват! 
и модифицировать данные. Если с сервером одновременно взаимодействуют 
несколько клиентов, он обеспечивает разделение данных. На рис. 1.3 условие 
показана архитектура клиент/сервер. 


В современной п-связной архитектуре сервер взаимодействует с другими 
серверными программами, которые ориентированы, например, на поддержку 
базы данных или на выполнение специальных вычислений. Таким образом 
можно выделить средства промежуточного уровня, которые могут работать 
и как клиент, и как сервер. Наши Ајах-приложения занимают в этой цепочке 
крайнюю позицию, т.е. являются клиентами. Поэтому в ходе дальнейшего 
обсуждения мы будем рассматривать все остальные компоненты системы как 
единый "черный ящик", выполняющий функции сервера. 
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Рис. 1.1. Приложение, управляющее электронными таблицами, иллюстрирует различные 


варианты взаимодействия с пользователем. Заголовки строк и столбцов подсвечиваются, 
внешний вид кнопки изменяется при помещении на нее курсора мыши, на панели 
инструментов отображаются различные пиктограммы, а ячейки таблицы позволяют 
редактировать содержащиеся в них данные 


Рис. 1.2. Архитектура приложения, предназначенного для выполнения в рамках 
настольной системы. Прикладная программа представляет собой отдельный 
процесс, в пределах которого модель данных и логика их обработки могут 
взаимодействовать друг с другом. Если на компьютере одновременно запущены 
два приложения, то ни одно из них не имеет доступа к модели данных другого. 
Взаимодействовать друг с другом они могут только посредством файловой 
системы. Обычно состояние программы определяется содержимым некоторого 
файла. На время работы этот файл блокируется, не позволяя приложениям 
обмениваться информацией о состоянии 
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Серверные программы Службы 


а 


Рис. 1.3. Системы клиент/сервер в составе п-связной архитектуры. Сервер предоставляет 
разделяемую модель данных, с которой могут взаимодействовать клиенты. Для быстрого доступа 
каждый клиент поддерживает собственную частичную модель данных, которая синхронизирована 

с моделью, находящейся на сервере. Модель на стороне клиента по сути является альтернативным 
представлением бизнес-объектов. С сервером могут одновременно взаимодействовать несколько 
клиентов, при этом осуществляется избирательная блокировка. На время работы сданными одного 
клиента другим запрещается доступ к некоторым объектам или записям базы данных. Сервер может 
быть реализован как единый процесс (такой подход преимущественно применялся до середины 
1990-х годов) или включать несколько промежуточных уровней, поддерживать различные 
\Меб-службы и т.д. В любом случае с точки зрения клиента сервер предоставляет единую точку входа 
и может рассматриваться как "черный ящик" 


\ 


Программа, поддерживающая электронные таблицы, работает с данны- 
ми, которые расположены в памяти локальной машины и в локальной фай- 
ловой системе. Если система грамотно разработана, взаимосвязь между дан- 
ными и средствами их отображения минимальна, но, несмотря на это, их 
нельзя разнести на разные узлы сети, а также невозможно организовать сов- 
местное использование информации. Таким образом, подобные программы 
нельзя считать клиентами. 

У\еБ-браузер несомненно является клиентом. Обращаясь к МеБ-серверу, 
браузер запрашивает у него тот или иной документ. Как правило, браузе- 
ры реализуют обширный набор функций, обеспечивающих просмотр МеБ- 
страниц. Например, пользователю доступны кнопка для возврата к преды- 
дущему документу, список предыстории и фреймы, позволяющие отобра- 
жать несколько документов. Однако мы считаем приложением набор стра- 
ниц, расположенных на конкретном МеБ-узле, поэтому универсальные сред- 
ства, предоставляемые браузером, связаны с приложением не больше, чем 
кнопка Ѕїіагі (пуск) в системе \190\$, посредством которой мы раскрыва- 
ем меню и запускаем программу поддержки электронных таблиц. 

Рассмотрим современное МеБ-приложение. В качестве примера выбран 
узел Ататоп (рис. 1.4), так как он знаком практически всем. Мы обратились 
к узлу Ататоп посредством браузера. Поскольку сервер имеет информацию 
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Үоиг Весоттепааіопѕ 
Нено, О. Ехріоге 1одау\ Гевїџгесі гесоптитегкіаіопв. (1 узы поі О, 
55 ма) 


Воска Весоттепча она 
Рюмег Ращез о ће Зиттег (ЕІомег Рашез 5.) 





Рис. 1.4. Исходная страница Атагоп. сот. Система имеет информацию о предыдущем 
визите, поэтому для навигации предложены различные ссылки: как общие для всех, так 
и ориентированные на конкретного пользователя 


о нашем прошлом визите, мы видим приветствие, список рекомендованных 
книг и сведения о предыдущих покупках. 

По щелчку на одном из заголовков в списке рекомендаций осуществляется 
переход на другую страницу (при этом мы теряем из виду все пункты спис- 
ка, которые отображались на экране несколькими секундами раньше). На 
ней также представлена разнообразная информация: обзоры, ссылки, посред- 
ством которых можно получить информацию об авторах, и названия книг, 
выбранных ранее (рис. 1.5). 

Короче говоря, нам предоставлена разнообразная информация, элементы 
которой тесно связаны между собой. Чтобы получить доступ к этой инфор- 
мации, следует щелкать на гипертекстовых ссылках и заполнять формы. Ес- 
ли в процессе просмотра узла Атағоп вы вздремнете за клавиатурой, то не 
узнаете, вышла ли новая книга о Гарри Поттере, до тех пор, пока не обновите 
У\еБ-страницу в окне браузера. К сожалению, мы не можем перенести спи- 
сок рекомендованных книг с одной страницы на другую и изменить порядок 
следования текстовых фрагментов. 

В этом нельзя обвинять специалистов Атахоп, так как они проделали 
большую работу. Но по сравнению с электронными таблицами модель взаи- 
модействия, на которой основаны данные документы, безусловно ограничена. 
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Рис. 1.5. Подробная информация о книге, предоставляемая Атагхоп. сот. На странице 
имеются как универсальные ссылки, так и ссылки, предназначенные для конкретного 
пользователя. Здесь можно найти многие элементы, которые были показаны на рис. 1.4. Для 
того чтобы пользователь мог с помощью М№ер-браузера выполнять необходимые операции 

с документом, эти элементы должны отображаться на каждой странице 


Почему же подобные ограничения присущи всем современным У\- 
приложениям? Они обусловлены техническими причинами, которые мы сей- 
час рассмотрим. 


1.1.2. Накладные расходы при работе в сети 


С наступлением эпохи Интернета появилась возможность связать все ком- 
пьютеры в мире так, чтобы они формировали единый ресурс чрезвычайно 
большого объема. Обращения к удаленным процедурам теперь производятся 
так же, как и к локальным. Программа, вызывающая функцию, может даже 
не знать, на каком из компьютеров находится реализующий ее код. 

Однако вызов удаленных и локальных процедур — это не одно и то же. 
Взаимодействие по сети связано с накладными расходами, а порой оно оказы- 
вается медленным и ненадежным. При выполнении скомпилированной про- 
граммы или при интерпретации исходного текста без обращения к сети коды 
методов и функций располагаются в той же локальной памяти, что и данные, 
которые они обрабатывают (рис. 1.6). При передаче данных методу и полу- 
чении результатов трудности не возникают. 
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Рис. 1.6. Диаграмма, иллюстрирующая вызов локальной процедуры. В процессе вызова 
участвует небольшое число элементов, поскольку модель данных и логика их обработки 
хранятся в локальной памяти и могут непосредственно взаимодействовать друг с другом 
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Рис. 1.7. Диаграмма, иллюстрирующая вызов удаленной процедуры. Программная логика на 
одном компьютере обращается к модели данных на другом компьютере 


При работе в сети на обоих концах соединения выполняется большой 
бъем работы, скрытой от пользователя (рис. 1.7). Порой эти вычисления 
амедляют работу программы даже больше, чем пересылка данных по лини- 
м связи. Процесс сетевого взаимодействия включает в себя решение самых 
азнообразных задач: передачу электрических сигналов по проводам (или пе- 
есылку радиосигналов через спутник), представление этих сигналов в виде 
воичных данных, проверку на наличие ошибок и организацию повторной 
ередачи, восстановление битовой последовательности и, наконец, интерпре- 
ацию двоичной информации. 
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Запрос, который исходит от вызывающей функции, должен быть пред- 
ставлен в виде объекта, который затем подвергается сериализации (т.е. преоб- 
разуется в последовательный набор байтов). Сериализованные данные затем 
передаются реализации протокола прикладного уровня (в современных усло- 
виях это чаще всего НТТР) и пересылаются по линиям связи (по проводам, 
оптоволоконным каналам или с помощью беспроводных соединений). 

На удаленном компьютере данные, полученные посредством протокола 
прикладного уровня, десериализуются, в результате чего формируется копия 
объекта запроса. Этот объект передается модели данных, которая генерирует 
объект ответа. Для передачи ответа вызывающей функции снова задейству- 
ются механизм сериализации и транспортные средства; в результате объект 
доставляется вызывающей функции. 

Процесс такого взаимодействия сложен, но его можно автоматизировать. 
Современные инструменты программирования, например Јауа или Місгоѕоћ 
.МЕТ Егате\жотк, обеспечивают это. Тем не менее при удаленном вызове про- 
цедуры (КРС) реально выполняется большой объем вычислений, и если такие 
обращения будут производиться слишком часто, производительность систе- 
мы снизится. 

Таким образом, вызовы по сети никогда не смогут быть так же эффек- 
тивны, как обращения к локальным методам. Более того, из-за ненадежно- 
сти сетевых соединений и необходимости организовывать повторную переда- 
чу информационных пакетов трудно предсказать, насколько медленнее будет 
обработан удаленный запрос по сравнению с локальным обращением. Шина 
локального компьютера не только более надежна, но и позволяет легко опре- 
делить время выполнения функции. 


Но какое отношение это имеет к работе пользователя, которому предо- 
ставляется лишь интерфейс программы? Оказывается, очень большое. 

Хороший интерфейс должен в чем-то имитировать реальный мир. 
А в большинстве случаев на действия в реальном мире следует немедленный 
отклик. Даже небольшая задержка между действием и реакцией на него сби- 
вает с толку пользователя, отвлекает его от решаемой задачи и заставляет 
переключить внимание на особенности самого интерфейса. 

Дополнительные вычисления, связанные с передачей по сети, часто так 
замедляют работу, что задержка становится заметной. Для обычных при- 
ложений, предназначенных для выполнения на настольных системах, малая 
практичность является следствием неправильных решений, принятых при 
разработке. В случае сетевого соединения мы получаем тот же результат ав- 
томатически. 

Из-за того, что величина задержки, связанная с передачей по сети, 
непредсказуема, время отклика может быть то больше, то меньше, и, следо- 
вательно, становится труднее оценить качество приложения. Итак, задержка 
при передаче по сети является основной причиной плохой интерактивности 
современных приложений. 
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Рис. 1.8. Диаграмма, поясняющая синхронный ответ на действия пользователя. 
В качестве примера выбрана утренняя побудка детей. Время на диаграмме 
откладывается по вертикальной оси. Серым цветом выделен период, в течение 
которого деятельность родителей приостанавливается 


1. 1.3. Асинхронное взаимодействие 


Решить проблему задержки, связанной с передачей данных по сети, разра- 
ботчик может единственным образом — предположить наихудшее развитие 
событий. На практике это означает, что надо создавать пользовательский 
интерфейс так, чтобы он не зависел от сетевого взаимодействия. К счастью, 
в некоторых случаях проблемы, вызванные задержкой отклика, можно сде- 
лать менее острыми. Рассмотрим пример из реального мира. Всем родителям 
приходится отправлять по утрам детей в школу. Можно стать над ними и до- 
жидаться, пока они не встанут из постелей и не оденутся. На это уходит 
много времени (рис. 1.8). 

Необходимо будить детей, подавив желание выглянуть в окно и игнори- 
руя мяуканье кошки. Если дети попросили есть — это сигнал о том, что они 
окончательно проснулись. Подобно процессу, выполняемому на сервере, дети 
пробуждаются медленно. Если родитель будет следовать синхронной модели 
взаимодействия, он затратит много времени на ожидание. Но в ожидании 
заветных слов "Все, мы проснулись, где завтрак?" можно заняться други- 
ми делами. 
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Рис. 1.9. Диаграмма, иллюстрирующая асинхронный ответ на действия 
пользователя. Следуя асинхронной модели ввода, родитель, подав сигнал 
побудки, предоставляет детям просыпаться самостоятельно и оповестить его 
об окончании этого процесса. В это время он продолжает заниматься другими 
делами; при этом время, непосредственно потраченное на побудку детей, 
существенно сокращается 


Возвращаясь к компьютерной тематике, сказанное означает выполнение 
действий в асинхронном режиме. Для этой цели используется отдельный по- 
ток. Снова пользуясь примером из реального мира, можно сказать, что дети 
будут просыпаться сами "в своем потоке", а родителю не придется синхро- 
низировать с ними свои действия до тех пор, пока он не узнает, что дети 
проснулись (т.е. пока они на захотят завтракать). После этого родителю при- 
дется взаимодействовать с детьми, так как, получив уведомление, он узнает, 
что дети проснулись и оделись (рис. 1.9). 

Любой достаточно квалифицированный разработчик пользовательского 
интерфейса знает, что длительные вычисления лучше производить в отдель- 
ном потоке в фоновом режиме; в это время пользователь может выполнять 
другие действия. Конечно, на определенное время, необходимое для запуска 
потока, пользовательский интерфейс будет заблокирован, но это время очень 
мало. Учитывая неизбежную задержку при сетевом взаимодействии, имеет 
смысл априори считать любой вызов удаленной процедуры длительной опе- 
рацией и выполнять ее асинхронно. 

Проблема четко сформулирована, и решение ее известно. Задержки, свя- 
занные с обменом по сети, играли роль в ранних приложениях клиент/сервер. 
Созданные неопытными разработчиками, клиенты "зависали" на неопреде- 
ленное время при попытке доступа к серверу, занимавшемуся обработкой 
большого числа запросов. Теперь, в эпоху Интернета, те же причины за- 
ставляют браузер временно останавливаться при переходе от одной Меб- 
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страницы к другой. Мы не можем влиять на задержку, связанную с взаи- 
модействием по сети, но можем минимизировать ее влияние, обращаясь к 
удаленным методам в асинхронном режиме. 

К несчастью, нам, разработчикам У№еб-приложений, не так-то просто сле- 
довать этим давно известным рекомендациям. Протокол НТТР действует по 
принципу "запрос-ответ". Клиент передает запрос на получение документа, 
а сервер отвечает, либо предоставляя требуемые данные, либо информируя 
о том, что он не может их найти, либо предлагая перейти по другому адресу, 
либо сообщая клиенту, что тот может использовать копию, содержащуюся 
в кэше. Протокол, в котором предусмотрено лишь взаимодействие "запрос- 
ответ", является в некотором смысле "односторонним". Клиент может обра- 
титься к серверу, но сервер по своей инициативе не может установить взаи- 
модействие с клиентом. Более того, в промежутке между двумя последова- 
тельными запросами сервер даже не имеет сведений о клиенте. 


Большинство разработчиков У\У/е6-приложений используют современные 
технологии, такие как Јауа, РНР или .МЕТ, поскольку в них поддерживается 
сеанс взаимодействия. Мысль о том, что неплохо бы реализовать в серверах 
поддержку текущего состояния процесса взаимодействия с клиентами, при- 
шла слишком поздно. Протокол НТТР очень хорошо выполняет те задачи, 
для которых он был изначально разработан, но адаптировать его для ре- 
шения вопросов, которые не были предусмотрены создателями данного про- 
токола, крайне сложно. Однако при асинхронном обращении к удаленному 
методу клиент должен быть оповещен дважды: при порождении потока и при 
его завершении. Для протокола НТТР и классических У\еб-приложений эта 
задача неразрешима. 


Основой классической модели У\е-приложения, подобной той, которая 
используется на сервере Ататоп, является \У\е-страница. Документ, отобра- 
жаемый в окне браузера, содержит набор гипертекстовых ссылок и формы, 
позволяющие переходить к другим документам и посылать серверу данные. 
Такой подход позволяет взаимодействовать с базами данных большого объ- 
ема. Специалисты Атахоп и других компаний накопили немалый опыт со- 
здания таких приложений и показали, что их вполне можно применять в се- 
рьезных проектах. 

В процессе многолетней работы с Интернетом большинство из нас при- 
выкли к описанной модели взаимодействия и не представляют себе альтерна- 
тивы. Инструменты разработки с интерфейсом МҮЅІҰҮС формируют У\- 
узел в виде набора М№еЫ-страниц. Переход от одной страницы, расположенной 
на сервере, к другой можно представить в виде диаграммы изменения со- 
стояния. Классическим У\е5-приложениям изначально присущи недостатки, 
связанные с получением отклика, и прибегнуть к асинхронной обработке не 
представляется возможным. 

Однако компания Атахоп, и не она одна, используя свой узел, успешно 
строит бизнес. Поэтому классические МеБ-приложения нельзя однозначно 
считать непрактичными. Чтобы понять, почему УеБ-страницы выполняют 
свои функции на сервере Ататоп, а для других целей могут оказаться непри- 
менимыми, рассмотрим различные образы использования. 
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/ 
1.1.4. Независимый и переходный образы использования 


Бессмысленно спорить о том, что лучше: велосипед или спортивный автомо- 
биль. Каждый из них имеет свои преимущества: уровень комфорта, скорость, 
потребление горючего. Немаловажен и тот факт, насколько конкретный вид 
транспорта соответствует вашему имиджу. Рассматривая конкретные образы 
использования, например, перемещение в час пик по центру города, органи- 
зацию летнего отдыха большой семьи или поиск зонтика в дождь, можно 
сказать, что в каждом из них возможен безусловно успешный исход. То же 
справедливо и для пользовательских интерфейсов компьютерных программ. 

Алан Купер (АІап Соорег), общепризнанный специалист в области обес- 
печения практичности программ, в своих работах подчеркивает важность 
образов использования. Он выделил две модели использования: переходную 
((гапз1еп@) и независимую (зоуеге1еп). Приложения, соответствующие пере- 
ходной модели, или переходное приложение, используются ежедневно, но 
обычно выполняют второстепенные функции. В отличие от него приложе- 
ние, отвечающее независимой модели, или независимое приложение, в тече- 
ние нескольких часов подряд завладевает всем вниманием пользователя. 

Многие приложения по своей сути являются переходными или независи- 
мыми. Текстовый процессор, которым пользуется писатель, является незави- 
симым приложением. В его работу вовлечено большое количество переходных 
процедур, например средства управления файлами (обычно они встроены 
в текстовый процессор, а доступ к ним осуществляется посредством диалого- 
вого окна), словари или программа проверки орфографии (они также чаще 
всего встроены), а также почтовая программа, используемая для обмена со- 
общениями с коллегами. Для разработчика программного обеспечения тек- 
стовый редактор и отладчик, входящие в состав интегрированной системы 
разработки, являются независимыми программами. Независимые приложе- 
ния обычно используются более интенсивно, чем переходные. 


Как вы помните, хороший интерфейс должен быть незаметен для пользо- 
вателя. Оценить качество работы можно следующим образом. Надо опреде- 
лить, насколько часто последовательность действий, направленных на реше- 
ние задачи, прерывается из-за того, что пользователю приходится обращать 
внимание на интерфейс программы. Если при копировании файлов из од- 
ной папки в другую возникает задержка в одну-две секунды, пользователь 
будет чувствовать себя вполне комфортно. Если с такой же двухсекундной 
задержкой программа рисования будет отображать проведенные линии или 
отладчик будет выводить текущее значение переменной, пользователь обяза- 
тельно начнет нервничать. 

У\еБ-узел Ататоп представляет собой переходное приложение. К это- 
му же типу относятся еВау, Соое и большинство масштабных Меб- 
приложений. Когда всемирная сеть стала доступна широкой публике, неко- 
торые предрекали, что вскоре традиционные офисные пакеты уступят место 
решениям на базе М№еЬ. С тех пор прошло больше десяти лет, но предсказа- 
ние не сбылось. У\еБ-страницы хороши как переходные приложения, но не 
как независимые. 
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Рис. 1.10. Эволюция велосипеда 


К счастью, современные УеБ-браузеры так же напоминают первоначаль- 
ную идею клиента для работы с удаленными документами, как швейцар- 
ский армейский ноле — каменный топор первобытного человека. Стремление 
улучшить программы просмотра информации из МеБ привели к созданию 
средств интерактивного взаимодействия, языков сценариев и встраиваемых 
модулей. (Получить представление о развитии М№МеБ можно, ознакомившись 
с документом уүү.үуебһіѕіогу.оге /\у\и м. 1815 /ууүүүу-1а1к.199341/0182.һіті. 
Сейчас же достаточно сказать, что в 1993 году Марку Андрессену пришлось 
убеждать Тима Бернерса-Ли и других специалистов в том, что язык НТМЕ 
лишь выиграет, если ввести в него дескриптор для поддержки изображений.) 


В течение нескольких лет лишь немногие отваживались признать 
Јауа$сгірі серьезным языком программирования. Большинство считали его 
лишь средством для отображения окон с сообщениями и создания интерак- 
тивных рекламных вставок. 

Ајах можно рассматривать как "реабилитационный центр" для жертв 
"войны браузеров" — средств, в свое время не понятых и отвергнутых. Предо- 
ставив среду для работы, мы можем вернуть ЈауаЅсгірі статус "полноправно- 
го члена" Интернет, способного обеспечить практичность МеБ-приложений, 
не доставляя беспокойства пользователям и не требуя замены браузеров. До- 
биться этого нам помогут тщательно продуманные прбстые в использовании 
инструменты. В качестве примера таких инструментов можно привести об- 
разы разработки, которые мы часто используем в своей работе. Мы будем 
периодически ссылаться на них в тексте книги. 

Процесс введения новой технологии — не только технический, но и со- 
циальный. Получив в свое распоряжение технологию, пользователи должны 
хорошо представлять, какие преимущества она может обеспечить, и приме- 
нять ее как нечто давно знакомое. Так, например, первые велосипеды назы- 
вались "лошадь для денди". Их приводили в движение, отталкиваясь ногами 
от земли. По мере того как эти устройства становились доступными различ- 
ным слоям населения, конструкция усовершенствовалась: появились педали, 
тормоза, цепная передача и надувные шины. С каждым нововведением вело- 
сипед все меньше напоминал лошадь (рис. 1.10). 
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Нечто похожее происходит сегодня в Мер. Технологии, которые лежат 
в основе Ајах, дают возможность превратить \еБ-страницы во что-то совер- 
шенно новое. В результате первых попыток применения Ајах У!е5-страницы 
были изменены так, что их уместно сравнить с переходной моделью по пути 
от "лошади для денди" к современному велосипеду. Но чтобы понять потен- 
циальные возможности Ајах, нам надо отказаться от некоторых принципов 
создания УеБ-страниц, а следовательно, и от правил, которым мы следовали 
в течение последних лет. Лишь несколько месяцев прошло с момента появле- 
ния Ајах, а процесс преобразования У№еБ уже начался. 


1.2. Четыре основных принципа Ајах 


Классическая модель приложения на основе У\еб-страниц связана не толь- 
ко с используемыми базовыми средствами, но и с нашим образом мышле- 
ния. Потратим несколько минут на то, чтобы выявить основные предпосыл- 
ки и определить, что надо делать, чтобы получить наибольшую выгоду от 
использования Ајах. 


1.2.1. Браузер имеет дело с приложением, ане с содержимым 


Для классического приложения на базе №еЫ-страниц браузер представляет 
собой лишь низкоуровневый терминал. Он не имеет информации о том, ка- 
кой этап работы выполняется пользователем. На сервере содержатся мини- 
мальные сведения об этом, которые, по сути, сводятся к поддержке сеанса. 
Если вы работаете с Јауа или .№МЕТ, средства поддержки сеанса на сервере 
доступны, подобно запросам ответам и МІМЕ-типам, посредством стандарт- 
ного АРІ. На рис. 1.11 показан типичный жизненный цикл классического 
УеБ-приложения. 


Когда пользователь регистрируется или другим способом инициализирует 
сеанс, создается несколько объектов на стороне сервера. Они представляют, 
например, "корзинку" покупателя или платежную карточку пользователя. 
Одновременно браузер получает исходную страницу. Она доставляется в виде 
потока НТМГ-данных, которые представляют собой сочетание стандартных 
элементов и данных, специфических для конкретного пользователя. 

При каждом обращении к серверу браузер получает очередную страницу, 
содержащую данные тех же типов, что в предыдущих документах. Браузер 
исправно убирает с экрана старый документ и отображает новый. Других 
Действий от него и не следует ожидать: это низкоуровневая программа, ко- 
торая делает только то, что было предусмотрено разработчиками. 

Когда пользователь активизирует ссылку, соответствующую окончанию 
сеанса, или закрывает браузер, выполнение приложения завершается и се- 
анс разрушается. Информация, которую пользователь должен увидеть при 
следующей регистрации, заносится в долговременное хранилище. В Ајах- 
приложении часть прикладной логики переносится на браузер (рис. 1.12). 
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Рис. 1.11. Жизненный цикл классического \Меб-приложения. Сведения 

о текущем состоянии "диалога" пользователя с приложением хранятся на 
\Меб-сервере, пользователь же видит лишь последовательность страниц. 
Ни одна из них не обеспечивает продолжения диалога без обращения 

к серверу 


После регистрации пользователя клиентское приложение доставляется 
браузеру. На многие действия пользователя это приложение способно реаги- 
ровать самостоятельно. Если имеющихся в наличии возможностей недоста- 
ет, оно передает запросы серверу, не прерывая последовательность действий 
пользователя. 

При регистрации пользователя браузеру предоставляется более сложный 
документ, существенную часть которого составляет код ЈауаЅсгірі. Этот до- 
кумент остается доступным пользователю в течение всего сеанса; при этом, 
в зависимости от действий пользователя, он изменяет свой внешний вид. Кли- 
ентская программа знает, как реагировать на вводимые данные, и способна 
решать, обрабатывать ли их самостоятельно, посылать ли запрос серверу (ко- 
торый в свою очередь обратится к базе данных или к другому ресурсу) или 
сделать и то и другое. 
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Рис. 1.12. Жизненный цикл Ајах-приложения 


Поскольку документ присутствует на стороне клиента в течение всего се- 
анса, он способен хранить информацию о его состоянии. Например, сведения 
о состоянии "корзинки" покупателя могут храниться не на сервере, а в кли- 
ентской программе. 


1.2.2. Сервер доставляетданные, ане содержимое 


Как было сказано ранее, на каждом этапе работы классическое МеБ- 
приложение предоставляет сочетание стандартных элементов и специальных 
данных. Когда пользователь добавляет товар в "корзинку", приложение в от- 
вет должно лишь изменить общую цену либо, при наличии ошибки, сообщить 
о ней. Как видно на рис. 1.13, код, отвечающий за эти действия, составляет 
незначительную часть документа. 

В Ајах-приложении "корзинка" может обладать более высоким "интеллек- 
том" и передавать серверу асинхронные запросы. Шаблон, элементы навига- 
ции и другие компоненты страницы уже присутствуют на стороне клиента, 
поэтому сервер должен передавать только данные, полученные в результате 
обработки запроса. 
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Рис. 1.13. Информация, доставляемая классическим \Мер-приложением 
(а) и Ајах-приложением (6). С увеличением длительности работы (в) суммарный трафик 
классического Мер-приложения возрастает быстрее, чем трафик Ајах-приложения 
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Ајах-приложение может достичь данной цели различными способами, 
например, вернуть фрагмент Јауа$Ѕсгірі-кода, поток, содержащий обычный 
текст или небольшой ХМГ-документ. Преимущества и недостатки каждого 
из этих решений мы подробно обсудим в главе 5. Сейчас же достаточно заме- 
тить, что данные в любом из этих форматов будут иметь значительно мень- 
ший объем, чем страница, возвращаемая классическим М№МеБ-приложением. 

График, представляющий возрастание трафика при работе Ајах-прило- 
жения, имеет крутой фронт, объясняемый тем, что при регистрации поль- 
зователя клиентской программе доставляется сложное приложение. Даль- 
нейшее взаимодействие с сервером становится гораздо более эффективным. 
Для переходного приложения, созданного на базе Меб-страниц, суммарный 
трафик может оказаться меньше, чем для Ајах-приложения. Однако по ме- 
ре увеличения времени работы пользователя ситуация меняется и Ајах- 
приложение становится гораздо более экономичнее своего конкурента, вы- 
полненного в рамках классического подхода. 


12.3. Пользователь можетнепрерывно взаимодействовать 
сприложением 


В УеБ-браузере предусмотрены два основных механизма ввода данных: ги- 
пертекстовые ссылки и НТМІ-формы. 

Гипертекстовые ссылки могут быть сформированы на сервере и снабжены 
параметрами ССІ (Соттоп Саѓеуау Іпіегѓасе — интерфейс общего шлюза). 
Их можно оформить как изображения и средствами С$$ (Саѕсайіпе Зе 
Әһееіѕ — каскадные таблицы стилей) организовать обратную связь с поль- 
зователями, например, обеспечить изменение внешнего вида при наведении 
на них курсора мыши. Хороший МебБ-дизайнер при желании добьется того, 
что ссылки будут выглядеть как полноправные компоненты пользователь- 
ского интерфейса. 

Формы могут содержать многие компоненты, типичные для пользова- 
тельского интерфейса обычных приложений, а именно: поля редактирования, 
флажки и переключатели опций, раскрывающиеся списки и пр. Однако неко- 
торые из компонентов в составе форм не поддерживаются. Так, например, 
в формах не предусмотрены деревья и таблицы. Формы, как и гипертексто- 
вые ссылки, содержат ОКІ, указывающие на ресурсы сервера. 

Гипертекстовые ссылки и формы могут также указывать на функ- 
ции ЈауаЅсгірі. В традиционных У-документах часто можно встретить 
Јауа8сгірі-сценарии, проверяющие корректность заполнения форм. Они сле- 
дят за незаполненными полями, значениями, выходящими за пределы до- 
пустимого диапазона, и другими подобными ошибками. Передача данных 
на сервер происходит лишь в том случае, если форма заполнена коррект- 
но. ЛауаЗс!ри-функции присутствуют на стороне клиента в течение того же 
времени, что и содержащая их УеБ-страница. 

При обращении к очередной странице пользователю приходится на время 
прервать работу. Предыдущий документ еще некоторое время отображается 
на экране; некоторые браузеры даже позволяют активизировать какую-либо 
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из видимых ссылок, но результаты предсказать невозможно. Скорее всего, 
пользователь, поступивший подобным образом, разрушит информацию о се- 
ансе, поддерживаемую на сервере. После получения новой страницы пользо- 
вателю предоставляются приблизительно те же возможности выбора, кото- 
рые он имел до этого. Например, добавление в "корзинку" товара, скажем, 
брюк, вряд ли приведет к перехолу от категории "мужская одежда" к кате- 
гории "женская одежда" или "детская одежда". 

Представим себе теперь, как ведет себя "корзинка" покупателя, реали- 
зованная в составе Ајах-приложения. Поскольку Ајах позволяет передавать 
данные в асинхронном режиме, пользователь может добавлять товар в "кор- 
зинку" с той же скоростью, с которой он щелкает мышью. Если клиент- 
ская часть приложения выполнена профессионально, она без труда справится 
с данной задачей, и пользователю не придется в своей работе учитывать спе- 
цифику взаимодействия программы и сервера. 

Очевидно, что реальной "корзинки" не существует; она выполнена в виде 
объекта поддержки сеанса на сервере. Однако пользователь, который делает 
покупки, не должен ничего знать об объекте сеанса. "Корзинка" — это поня- 
тие, позволяющее упрощенно представить выполняемые действия. Необходи- 
мость переходить от понятия "корзинка" к объектам, содержащимся в памяти 
компьютера, создает дискомфорт для пользователя. Необходимость ожидать 
обновления страницы принуждает вернуться из виртуального мира в реаль- 
ный (рис. 1.14). Приложение, реализованное средствами Ајах, свободно от 
этого недостатка. Приобретать товары в сетевом магазине пользователям 
приходится лишь время от времени, однако в других областях деятельно- 
сти, например, при решении сложных инженерных задач, поминутное пре- 
рывание работы, связанное с необходимостью ожидать появления очередной 
страницы, недопустимо. 


Еще одно преимущество Ајах состоит в том, что данная технология поз- 
воляет обрабатывать более обширный набор событий, соответствующих дей- 
ствиям пользователя. Становится возможным реализовать перетаскивание 
объектов и другие сложные функции интерфейса, в результате чего Меб- 
приложение становится похожим на обычную прикладную программу, вы- 
полняемую на настольной системе. С точки зрения практичности эта свобо- 
да действий важна не потому, что она больше соответствует представлениям 
пользователя о виртуальном мире, а потому, что позволяет лучше сочетать 
взаимодействие с пользователем и запросы к серверу. 

Для того чтобы обратиться к серверу в классическом МеБ-приложении, 
мы должны щелкнуть на гипертекстовой ссылке либо активизировать эле- 
мент формы, а затем ожидать результата. Это неизбежно отвлекает от ос- 
новной работы. Если же обращение к серверу происходит в ответ на переме- 
щение мыши, перетаскивание объекта или нажатие клавиши, сервер работает 
параллельно с пользователем. Сказанное выше иллюстрирует Соовіе Ѕирреѕї 
(Бир: //м\мм. воов1е. сот /уебһр?сотріеѓе=1). В данном примере приложение 
реагирует на нажатие клавиш по мере того, как пользователь вводит инфор- 
мацию в поле. Клиент взаимодействует с сервером, извлекает и отобража- 
ет наиболее вероятные завершения фраз. Исходной информацией при этом 
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Рис. 1.14. Прерывание последовательности действий пользователя для обработки событий. 
Пользователь работает с двумя типами объектов: один тип непосредственно относится 

к выполняемой работе, а другой связан с используемой вычислительной системой. Когда 
пользователю приходится часто переключаться от одного типа к другому, это рассеивает его 
внимание, в результате производительность труда снижается 


являются запросы, выполненные другими пользователями или поисковыми 
серверами. Упрощенный вариант подобной службы мы рассмотрим в главе 8. 


1.2.4. Реальное кодирование требует порядка 


В классических У!е6-приложениях для реализации дополнительных возмож- 
ностей в документы часто включают фрагменты ЈауаЅсгірі-кода. Страничная 
модель не позволяет этим фрагментам присутствовать на стороне клиента 
дольше самой страницы, а это ограничивает их применимость. В результа- 
те ЈауаЅсгірі приобрел репутацию языка, пригодного лишь для поделок и не 
заслуживающего внимания серьезных разработчиков. 

Создание кода для Ајах-приложений существенно отличается от того, 
к чему успели привыкнуть программисты. Код, доставляемый клиенту в на- 
чале работы с приложением, доступен до завершения сеанса, причем он не 
прерывает и не замедляет работу пользователя и не приводит к напрасному 
расходованию памяти. Если разработчик стремится выйти на рынок неза- 
висимых приложений, то он должен учитывать, что его программа будет 
использоваться по нескольку часов подряд. Для этого нужен высокопроизво- 
дительный код, допускающий сопровождение. При его создании необходима 
Дисциплина программирования и понимание задачи, как и при написании 
серверных программ. 

Объем кода, вероятно, будет большим, чем в случае классического Мер- 
приложения. В результате большее значение получает сама структура кода. 
Создание приложения уже становится не под силу одиночке — этим должен 
заниматься коллектив разработчиков. В процессе работы необходимо обеспе- 
чить выделение подзадач, учитывать дальнейшую поддержку, одним словом, 
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работа будет происходить по тому же сценарию, что и создание обычных про- 
грамм для настольных систем. 

Ајах-приложение должно эффективно взаимодействовать с сервером 
в процессе работы пользователя. Очевидно, что они являются непосред- 
ственными "потомками" классических №МеђБ-приложений, но похожи на них 
не больше, чем современный спортивный велосипед на "лошадь для ден- 
ди". Лишь помня об этих отличиях, можно создать конкурентоспособ- 
ное У\У’еБ-приложение. 


1.3. Применение богатых клиентов Ајах 


Однако достаточно теории. Ајах уже используется для создания реальных 
приложений, и преимущества данного подхода видны на практике. В те дале- 
кие времена, когда появились велосипеды, дальновидные конструкторы уже 
пытались снабдить их педалями и резиновыми шинами, а также подумывали 
о дисковых тормозах и цепной передаче. В этом разделе мы обсудим текущее 
положение дел с использованием Ајах, а также подробно поговорим об одном 
из первых применений данной технологии. 


1.3.1. Системы, созданные с использованием Ајах 


Наибольший вклад в формирование современного представления об Ајах- 
приложениях внесла компания Соое. (Она использовала данную техноло- 
гию еще до того, как та получила имя Ајах.) Бета-версия службы @Май стала 
доступна в начале 2004 года. Эта служба привлекла внимание пользователей 
не только размерами предоставляемого им почтового ящика, но и интерфей- 
сом, который позволял одновременно открывать несколько сообщений и авто- 
матически обновлял список корреспонденции, даже если пользователь подго- 
тавливал в это время новое сообщение. Это был существенный шаг вперед по 
сравнению с обычными почтовыми системами, предлагаемыми большинством 
провайдеров. Сравнивая СМай с МеБЬ-интерфейсами корпоративных почто- 
вых серверов, например Місгоѕой ОпЙоок и Іоѓиѕ М№оїѓеѕ, нетрудно заметить, 
что СМаі обеспечивает большинство функций, не прибегая к помощи тяже- 
ловесных и ненадежных элементов АсйуеХ или Јауа-аплетов. В результате 
служба доступна не только для корпоративных пользователей, вооруженных 
специально настроенными машинами, но и для большинства обычных систем. 


За СМаі последовали другие интерактивные службы, например, Соое 
Ѕиевеѕі, поисковый сервер которой автоматически предлагает завершение 
фразы, указываемой в составе запроса, и Соовіе Марѕ — интерактивная мас- 
штабируемая карта, посредством которой определяется расположение ресур- 
са. Начали эксперименты с данной технологией и другие компании. В каче- 
стве примера можно привести интерактивную систему Еіскг, которая в на- 
стоящее время является составной частью Үаһоо!. 

Упомянутые выше системы — лишь проверка возможностей нового под- 
хода, они представляют собой переходные приложения, применяемые лишь 
эпизодически. За ними последовали независимые Ајах-приложения, о кото- 
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рых мы поговорим в главе 3, а в приложении В обсудим текущее состояние 
дел в этой области. 

Наличие приложений, созданных на базе Ајах, свидетельствует о том, что 
новый подход получает признание разработчиков. Если отдельные програм- 
мисты иногда используют новую технологию лишь для того, чтобы озна- 
комиться с ней, то такие компании, как Соое и Үаһоо!, прибегают к ней 
только в том случае, если она сулит выигрыш в конкурентной борьбе. Мы 
уже обсуждали преимущества Ајах, которые следуют из теоретических рас- 
суждений. В следующем разделе мы разберем Соое Марѕ и выясним, как 
теоретические предпосылки реализуются на практике. 


1.3.2. боодіе Марѕ 


(Соовіе Марѕ объединяет в себе черты средств просмотра и поискового 
сервера. Первоначально данная служба поддерживала только карту США 
(рис. 1.15), но впоследствии набор доступных регионов был расширен'. За- 
прос к карте формируется в текстовом формате; допускается детализация до 
конкретной улицы и даже до таких заведений, как гостиницы или рестора- 
на (рис. 1.16). 

Поисковые средства функционируют как классическое М№еБ-приложение, 
обновляя всю страницу, но сама карта поддерживается с использованием 
Ајах. После щелчка на ссылке, соответствующей гостинице, отображается 
подсказка; не исключено, что карта немного сдвинется в окне, чтобы наи- 
лучшим образом разместить отображаемый текст. Прокрутка карты — одна 
из самых интересных особенностей Соое Марѕ. Пользователь может пере- 
таскивать всю карту с помощью мыши. Сама карта представляет собой мо- 
заику, составленную из маленьких изображений, и если при прокрутке дол- 
жен отобразиться новый фрагмент, он подгружается в асинхронном режиме. 
В связи с этим при прокрутке заметна задержка: сначала отображается белая 
пустая область, которая постепенно заполняется по мере копирования оче- 
редного фрагмента. Пользователь может продолжать прокрутку, загружая 
новые изображения. Элементы карты кэшируются браузером и сохраняют- 
ся в течение сеанса, поэтому возврат к той части карты, которая уже была 
просмотрена ранее, происходит значительно быстрее. 


Возвращаясь к вопросу о практичности, нельзя не отметить две особенно- 
сти. Во-первых, действия, вызывающие загрузку новых фрагментов карты, 
существенно отличаются от щелчка на ссылке. Эти действия пользователь 
выполняет, не отвлекаясь от основной работы; он делал бы то же самое и про- 
сматривая карту, реализованную с помощью локального приложения. Други- 
ми словами, действия пользователя не прерываются из-за обращения к сер- 
веру. Во-вторых, запросы передаются в асинхронном режиме, а это означает, 
что ссылки, элементы управления масштабированием и другие компоненты 
страницы остаются доступными, несмотря на загрузку новых данных. 


' В настоящее время уже существует приложение Соо2е Еаг В, которое охватывает весь земной 
шар. — Примеч. ред. 
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Рис. 1.15. На исходной странице Сооде Марѕ отображаются масштабируемая карта США 

и поле ввода ключевых слов, знакомое пользователям поискового сервера Обоодіе. Заметьте, 
что средства масштабирования располагаются в верхней части карты, что позволяет 
пользователю изменять масштаб, когда карта находится в поле зрения 


Карты в Интернете — не новость. Но если мы обратимся к узлу подобного 
назначения, созданному задолго до появления Ајах, то увидим, что взаимо- 
действие с пользователями реализовано совершенно по другим принципам 
Карта обычно разделена на фрагменты. Ссылки, управление масштабирова- 
нием, как правило, расположены за пределами карты либо на обрамлении. 
После щелчка на одной из таких ссылок обновляется весь экран, в резуль- 
тате чего на той же УеБ-странице отображаются другие фрагменты карты. 
Пользователю приходится постоянно отвлекаться от основной задачи. Если 
он уже имел опыт работы с Соое Марѕ, то, испытав на себе особенности 
взаимодействия с таким сервером, вряд ли захочет обращаться к нему снова. 

Рассмотрим те же задачи с точки зрения программ, расположенных на 
сервере. Как службы, созданные на базе Ајах, так и службы, созданные 
оез использования этой инфраструктуры, применяют одинаковые решения. 
Ь обоих случаях карта представляется как набор простых изображений. 
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Рис. 1.16. Поиск гостиницы с помощью Соодіе Марѕ. Обратите внимание на традиционное 
использование технологий ОНТМІ для создания визуальных эффектов и подсказок. Запросы 
Ајах позволяют сделать процесс поиска более динамичным 


Классический МеБ-сервер по мере прокрутки пользователем карты посто- 
янно обновляет шаблон, в то время как после запуска приложения Соозе 
Марѕ передаются лишь необходимые данные, в частности, изображения, от- 
сутствующие в кэше. (В обоих случаях браузер кэширует изображения, но 
в классических приложениях содержимое кэша используется лишь для сни- 
жения нагрузки на сеть.) Для интерактивных служб, таких как Соо?е, про- 
стота использования является основной характеристикой, определяющей, за- 
хочет ли пользователь повторно обратиться к ней или предпочтет другой 
сервер. Другими словами, одним из ключевых показателей является впечат- 
ление пользователя от документа. Улучшая интерфейс и придавая ему гиб- 
кость, обеспечиваемую Ајах, компания Соо?е заставила своих конкурентов 
задуматься о качестве их служб. Конечно же, нельзя упускать из виду дру- 
гие факторы, например качество услуг, но при прочих равных возможностях 
Ајах может обеспечить существенное преимущество компании, использую- 
щей эту технологию. 
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Можно ожидать, что с ростом потребности в высококачественном при- 
кладном интерфейсе традиция использования Ајах получит дальнейшее раз- 
витие. Вполне вероятно, что в течение ближайших нескольких лет позиции 
Ајах-приложений на рынке будут укрепляться. Однако есть и другие техно- 
логии, пригодные для создания богатых клиентов. Несмотря на то что рас- 
смотрение этих технологий не входит в круг задач, стоящих перед нами, все 
же необходимо уделить им хотя бы немного внимания. 


1.4. Альтернативные технологии 


Технология Ајах призвана удовлетворить потребность рынка в богатых кли- 
ентах, обладающих высокими интерактивными возможностями и не требую- 
щих инсталляции на локальных компьютерах. Однако Ајах — не единствен- 
ная инфраструктура подобного назначения. Для некоторых задач она даже 
не является наилучшим выбором. В последующих разделах мы рассмотрим 
альтернативные решения. 


1.4.1. Масготеаіа Еіаѕһ 


Масготеаіа ЕІаѕһ — система, предназначенная для поддержки интерактив- 
ных движущихся изображений. Она использует сжатые данные в форма- 
те векторной графики. Изображения НазВ могут воспроизводиться в про- 
цессе загрузки, что позволяет пользователю просматривать первые фраг- 
менты еще до окончания копирования данных. Данная система предостав- 
ляет интерактивные возможности. Для их программирования используется 
АсіопЅсгірі — язык, напоминающий ЈауаЅсгірі. Поддерживаются также ком- 
поненты, обеспечивающие ввод данных. Технология НазВ подходит для са- 
мых разных применений — от компьютерных игр до сложных интерфейсов 
бизнес-приложений. В рамках данной технологии реализованы мощные сред- 
ства поддержки графики, чем, к сожалению, не могут похвастаться базовые 
средства Адах. 

Технология НазН известна уже давно и поддерживается посредством 
встраиваемых модулей. В принципе, полагаться на модули, встраиваемые 
в клиентскую программу, не следует, однако модули, поддерживающие Е1аѕћ, 
входят в комплект поставки большинства браузеров. Данная технология 
может использоваться на платформах Міпаоуѕ, Мас ОЗ Х и Ипих, но 
средства, инсталлируемые в системе Шпих, несколько уступают двум дру- 
гим платформам. 

Для создания богатых клиентов на базе ЕазВ могут также использо- 
ваться две дополнительные технологии: Масготе а Нех и пакет Газ7]о. Обе 
они реализуют на стороне сервера базовый набор средств, предназначенный 
для генерации интерфейсов бизнес-приложений, и используют средства Ј2ЕЕ 
(Јауа 2 Ещегризе Еаііоп). Для динамического управления изображениями 
НазВ на низком уровне предоставляются специальные инструменты, напри- 
мер РНР-модуль Ыѕ№Ё. 
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1.4.2. ЧУауа МеБь Зач 


Јауа У№еБ Ѕїагї — это спецификация, определяющая способ связывания сер- 
верных У!е5-приложений, созданных на базе Јауа. В результате программа, 
выполняемая на настольной системе, может находить, копировать и запус- 
кать их. Допускается создавать гипертекстовые ссылки, указывающие на эти 
приложения; такой подход обеспечивает обращение к ним из браузера, под- 
держивающего Меһр Ѕіагі. Средства У№еб Зап включены в состав последних 
версий Лауа. В процессе инсталляции продуктов Іһќегпеі ЕхрІогег и Мо7Ша 
по умолчанию разрешено использование данной технологии. 

Единожды скопированное приложение Мер Ѕќагї хранится в составе фай- 
ловой системы в так называемой "песочнице" и автоматически обновляется 
при получении новой версии. Такой подход допускает работу при отсутствии 
сетевого соединения и снижает объем трафика при повторной загрузке до- 
кументов. В результате становится возможной работа с приложениями объе- 
мом в несколько мегабайт. В приложениях используется цифровая подпись, 
и пользователь может решать, предоставлять ли им доступ к файловой си- 
стеме, сетевым портам или к другим ресурсам. 


Традиционно для создания интерфейса приложений МеБ Май использу- 
ются средства Лауа Ѕуіпе. Средствами УМеБ Ѕ$їагі могут доставляться ком- 
поненты $ҰТ (5(апдага Маре ТооШКи), используемые в составе ЕсІірѕе, но 
чтобы добиться этого на практике, надо затратить дополнительные усилия. 

На платформе .МЕТ реализованы средства аналогичного назначения — 
№ Тоосһ Юеріоутепї. Они также обеспечивают простоту доставки, богатый 
пользовательский интерфейс и защиту. 

Основной недостаток обеих технологий — потребность в заранее установ- 
ленной исполняющей системе. Очевидно, что исполняющая система необхо- 
дима для любого богатого клиента, но НазН и Ајах используют для этой цели 
общепринятые программные средства. (Для Ајах исполняющей системой яв- 
ляется сам браузер.) Системы Јауа и .МЕТ имеются не на всех машинах, 
поэтому в настоящее время при реализации М№еБ-служб, ориентированных на 
массовое применение, на них нельзя полагаться. 


1.5. Резюме 


Мы рассмотрели различия между переходными и независимыми приложени- 
ями и требования к каждому из них. Переходные приложения, конечно же, 
должны выполнять поставленные перед ними задачи, но считается, что, об- 
ратившись к ним, пользователь уже отвлекся от основной работы, поэтому 
допускается, чтобы пользователь уделил определенное внимание не только 
результатам работы, но и самой программе. Независимые приложения, на- 
против, предназначены для длительной и интенсивной работы, и хороший 
интерфейс должен выполнять свои функции незаметно для пользователя и не 
отвлекать его от решения основной задачи. 


60 Часть. Новый взгляд на Мер-приложение 


Системы клиент/сервер и п-связные архитектуры необходимы для взаи- 
модействующих программ или для приложений, координируемых из едино- 
го центра, но для них неизбежна задержка, связанная с передачей по сети, 
что снижает производительность работы пользователя. Предпринимаются 
попытки решить проблему задержки путем асинхронной удаленной обработ- 
ки событий, но, несмотря на это, необходимо признать, что модель "запрос- 
ответ", типичная для традиционных У\!е5-приложений, в принципе не может 
обеспечить высокую производительность. 

В этой главе мы поставили цель для Ајах и для нас, как пользовате- 
лей этой инфраструктуры: реализовать посредством МеБ-браузера доставку, 
независимых приложений, обеспечивающих условия для высокой производи- 
тельности пользователя и работу в сети. Кроме того, должна быть возмож- 
на одновременная централизованная поддержка всех приложений. Для того 
чтобы добиться поставленной цели, мы должны пересмотреть свой взгляд на 
У'еБ-страницы и приложения. Мы определили основные правила, которыми 


следует руководствоваться, и привычные представления, от которых следу- 
ет отказаться. 


ы Браузер имеет дело с приложением, а не с содержимым. 
Ы Сервер доставляет данные, а не содержимое. 


• Пользователь постоянно взаимодействует с приложением, и большинство 
запросов к серверу формируется без его участия. 


• Код имеет большой объем, кроме того, он сложен и структурирован. Код 
играет главную роль в нашей архитектуре, поэтому ему надо уделять 
основное внимание. 


В следующей главе мы обсудим основные технологии Ајах и попробуем 
написать небольшие фрагменты кода. Остальная часть книги будет посвя- 
щена рассмотрению важных принципов разработки, позволяющих достичь 
поставленных перед нами целей. 


1.6. Ресурсы 


Для того чтобы лучше понять вопросы, затронутые в данной главе, надо 
обратиться к перечисленным ниже источникам. 


. Впервые инфраструктура Адах была упомянута 18 февраля 2005 г. в ста- 
тье Джесса Джеймса Гарретта, которая доступна по адресу ВИр:// 
Уууу .адарііуераїћ.сот/риЬіісаііопѕ/еѕѕауѕ /агсһіуеѕ/000385.рһр. 


• Рассуждения Алане. Купера о независимых и переходных приложениях 
можно найти в следующем документе: һіїр:/ /уу%№.соорег.сот/агііс1еѕ/ 
агі уоиг рговгатѕ роѕіџге.һіт. 
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Служба Соовіе Марѕ доступна по следующим адресам. 
Для жителей США: һїр://тарѕ.воов1е.сот 


Для жителей Соединенного Королевства: ВИр://тарз.гооз[е.со.иК 
Для тех, кто живет на Луне: НЕ р: / /тооп. воо8е. сот 


Изображения велосипеда получены с МеБ-узла Рейаііпо Ніѕќіогу, располо- 
женного по адресу һр: //му%у.реӢаіпеһіѕіогу.сот. 


Приложение Соо?1е Еагїһ можно найти на сайте һіір://еагіһ.воов1іе.сот/. — Примеч. ред. 






Знакомство с 


В этой главе... 


* Технологии, лежащие в основе Ајах 

• Использование каскадных таблиц стилей 
для формирования внешнего вида документа 

• Использование Ооситепі Објесі Моае1 
для определения структуры 
пользовательского интерфейса 


• Асинхронное взаимодействие с сервером 
посредством ХМГНИрКеацез 


• Совместное использование базовых технологий 
в рамках инфраструктуры Ајах 
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В главе 1 мы говорили о работе пользователей и о том, как Ајах может 
помочь им в повседневной деятельности. Большинство из нас занимаются 
разработкой программ, и, убедившись в том, что инфраструктура Адах до- 
стойна внимания, надо выяснить, как работать с ней. Несмотря на то что 
данный подход совершенно нов, ряд действий по созданию приложений уже 
знаком вам, особенно если вы имеете опыт работы с Интернетом. 

В данной главе мы обсудим основы Ајах, поговорим о четырех главных 
принципах Ајах и их взаимосвязи, а также рассмотрим примеры, иллюстри- 
рующие данный материал. 

Эту главу можно рассматривать как вводную, подобно разделам дру- 
гих книг, в который обсуждается приложение "Нео, Уопа!". Основная наша 
цель — добиться того, чтобы рассматриваемые примеры были работоспособ- 
ны. Подробное обсуждение материала мы начнем в главе 3. Если вы уже 
знакомы с некоторыми технологиями, составляющими Ајах, то можете про- 
пустить соответствующие разделы. Если же вы еще ничего не знаете об Ајах 
и не имеете опыта в программировании клиентских М№еб-программ, то ввод- 
ный материал позволит вам лучше ориентироваться в остальной части книги. 


2.1. Основные элементы Ајах 


Ајах — не одна конкретная технология, скорее это совокупность четырех 
технологий, дополняющих друг друга (табл. 2.1). 

В главе | было показано, как сложные Ајах-приложения доставляются 
пользователям и как пользователи взаимодействуют с ними. Это достигает- 
ся за счет использования Јауа$сгірі-кода, который "объединяет" приложение, 
определяет последовательность действий пользователя и бизнес-логику про- 
граммы. Действия с интерфейсом преобразуются в операции с элементами 
ром (Боситеп Објесї Моае]), с помощью которых обрабатываются дан- 
ные, доступные пользователю, в результате чего представление их изменяет- 
ся. Здесь же производится обработка перемещений и щелчков мышью, а так- 
же нажатий клавиш. Каскадные таблицы стилей, или С88 (Саѕсааіпе Ме 
Ѕһееѓѕ), обеспечивают согласованный внешний вид элементов приложения и 
упрощают обращение к РОМ-объектам. Объект ХМГНИрКедие$ (или подоб- 
ные механизмы) используется для асинхронного взаимодействия с сервером, 
обработки запросов пользователя и загрузки в процессе работы необходимых 
данных. Эти технологии и их взаимосвязь в рамках Ајах показаны на рис. 2.1. 


Три из этих четырех технологий — С5$, ООМ и ЈауаЅсгірі — состав- 
ляют ОНТМЕ (ЮОупатіс НТМІ). Следует заметить, что средства ОНТМІ, 
появившиеся в 1997 году, подавали большие надежды, но так и не оправда- 
ли их. ОНТМЕ позволяет создавать на базе УМеБ-страниц интерфейсы с до- 
статочно большими интерактивными возможностями, но любые изменения 
внешнего вида страницы реализуются лишь путем повторной загрузки всего 
документа. Набор действий, которые можно выполнить без обращения к сер- 
веру, весьма ограничен. Средства ОНТМГ, интенсивно используются в Ајах, 
но благодаря асинхронным запросам можно получить результаты, которые 
невозможно получить с помощью обычных \еБ-страниц. 
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Таблица 2.1. Базовые технологии Ајах 


Јама$стірї Јамабсгірї — это язык сценариев общего назначения, 
предназначенный для включения кода в №Мер-приложение. 
Интерпретатор Јамабсгірї в составе Мер-браузера 
обеспечивает взаимодействие со встроенными 
средствами браузера. Данный язык используется для 
создания Ајах-приложений 


С$$ (Саѕсадіпо уе Ѕһееіѕ) С55 предоставляет возможность определять стили 
элементов М/ер-страницы. С помощью данной технологии 
можно без труда обеспечить согласованность внешнего 
вида компонентов приложения. В Ајах С55 используется 
для изменения представления интерфейса в процессе 
интерактивного взаимодействия 


ром (Ооситепї Објесї Моде!) РОМ представляет структуру Меб-страницы в виде 
набора объектов, которые можно обрабатывать 
средствами Јамабсгірї. Это дает возможность изменять 
внешний вид интерфейса Ајах-приложения в процессе 
работы 


Объект ХМІ.НеєрКедиеѕ Объект ХМЕНИрВеаие$1 позволяет программисту 
получать данные с Мер-сервера в фоновом режиме. Как 
правило, возвращаемая информация предоставляется 
в формате ХМЕ, но данный объект позволяет также 
работать с любыми текстовыми данными. Несмотря на то 
что ХМІНіїрВедиеѕї является наиболее гибким из всех 
инструментов общего назначения, позволяющих решать 
подобные задачи, существуют и другие способы 
получения данных с сервера. Мы обсудим их в этой главе 


Очень валено, что средства поддержки всех рассматриваемых здесь тех- 
нологий уже присутствуют в большинстве современных браузеров, включая 
Місгоѕой Ицегпе{ ЕхрІогег, семейство Мох Ша/Сеско, Еігеѓох, МохШа Ѕиіќе, 
Меіѕсаре Мауіѕаѓог, Сатіпо, Орега, АррІе Ѕаѓагі и Копачегог (который ори- 
ентирован на выполнение в среде Ошх КРЕ). К сожалению, конкретные ре- 
ализации этих технологий в разных браузерах различаются рядом важных 
деталей, более того, различия встречаются даже в разных версиях одного 
продукта. Правда, за последние пять лет положение дел несколько улуч- 
шилось, и разработаны способы, позволяющие справиться с несовместимо- 
стью браузеров. 

В составе каждой современной операционной системы имеется браузер. 
Таким образом, подавляющее большинство настольных и портативных ком- 
пьютеров уже готово для запуска Ајах-приложений. Разработчики программ 
на базе Јауа или .МЕТ могут лишь мечтать об этом. Браузеры для КПК 
и мобильных телефонов обычно имеют усеченный набор возможностей и не 
поддерживают полный набор Ајах-технологий. Следует заметить, что если 
бы средства поддержки Ајах и имелись в наличии, все равно размеры экра- 
на и особенности ввода данных создавали бы существенные проблемы при 
работе с Ајах-приложениями. На сегодняшний день инфраструктура Ајах 
ориентирована лишь на настольные и портативные компьютеры. 
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Рис. 2.1. Основные компоненты Ајах. ЈауаЅсгірї определяет 
бизнес-правила и поток выполнения. роситепї Објесї Моаеі 
и каскадные таблицы стилей позволяют изменять внешний вид 
приложения в соответствии с данными, полученными с сервера 

в асинхронном режиме. Получение данных обеспечивается объектом 
ХМІНіїрВеаиеѕіили другими подобными средствами 


Сначала мы рассмотрим технологии Ајах, независимо друг от друга, 
а затем поговорим об их взаимодействии. Если вы имеете опыт разработ- 
ки МеБ-приложений, то материал, изложенный в данной главе, уже знаком 
вам. В этом случае вы можете перейти к главе 3, где мы обсудим вопросы 
управления данными технологиями с использованием образов разработки. 

Разговор о технологиях, составляющих Ајах, начнем с ЈауаЅсгірі. 


2.2. ЈауаЅсгірі изучался не зря 


Основным элементом Ајах несомненно является Јауа$Ѕсгірі. При работе Ајах- 
приложения клиентская часть, включающая данные, средства их представ- 
ления и программную логику, полностью копируется в память. Инструмен- 
том для реализации программной логики является язык программирования 
ЈауаЅсгірі. Он несколько напоминает языки семейства С. 

ЈауаЅсгірі можно охарактеризовать как язык сценариев общего назначе- 
ния без поддержки типов. Отсутствие типов означает, что переменные не объ- 
являются явно как строковые, целочисленные или объектные. Одной и той 
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переменной можно присваивать значения различных типов. Например, 
Ующие строки кода допустимы. 
уаг х=3.1415926; 
х-рі-"> 
Сначала при определении переменной х она инициализируется числом, 
а впоследствии ей же присваивается строковое значение. 

Термин "интерпретируемый" означает, что программа не компилируется 
в машинный код. Исходный код непосредственно выполняется без предвари- 
тельного преобразования. Доставка ЈауаЅсгірі-приложения сводится к раз- 
мещению исходного текста на \еБ-сервере и передаче этого кода по Ин- 
тернету браузеру. Допустимо даже выполнение фрагментов кода в процес- 
се копирования. 


уаг х=еуа1('7*5'); 


след 


Здесь вычисляемое выражение представляет собой не два числа и ариф- 
метический оператор, а строку текста. Если мы вызовем функцию еуа1 () 
и передадим ей в качестве параметра строку, то ЈауаЅсгірі-выражение, со- 
держащееся в строке, будет интерпретировано и функция возвратит резуль- 
тат вычислений. Чаще всего это лишь замедляет работу, но бывают случаи, 
когда такой подход позволяет увеличить гибкость программы. 

Термин "общего назначения" говорит о том, что язык пригоден для ре- 
шения большинства задач программирования. Базовые средства ЈауаЅсгірї 
обеспечивают поддержку чисел, строк, даты, времени, массивов, регулярных 
выражений, применяемых для обработки текста, и математических функций 
(в частности, тригонометрических). Кроме того, они обеспечивают генерацию 
псевдослучайных чисел. С помощью ЈауаЅсгірі можно определять структу- 
рированные объекты, что позволяет упорядочить сложный код и применять 
современные принципы разработки программ. 

В среде, предоставляемой УеБ-браузером, процессору ЈауаЅсгірі доступ- 
ны средства С5$, РОМ и объекты ХМГНирКедие$. В результате автор МеБ- 
страницы может контролировать ее поведение программными средствами. 
Если не учитывать объекты, специфические для браузера, то ЈауаЅсгірі мож- 
но рассматривать как обычный язык программирования. 

Данная книга не является руководством по ЈауаЅсгірі. В приложении 
Б мы вкратце рассмотрим выразительные средства языка и обратим ваше 
внимание на его отличие от языков семейства С, к которому, несмотря на 
имя, можно отнести и Јауа. Фрагменты ЈауаЅсгірі-программ будут неодно- 
кратно встречаться в примерах, приводимых в данной книге. Существует 
немало книг, непосредственно посвященных основам ЈауаЅсгірі (ссылки на 
них приводятся в конце этой главы). 

В наборе технологий, составляющих Ајах, язык ЈауаЅсгірі выполняет 
роль объединяющего элемента, обеспечивающего совместную работу других 
компонентов. Таким образом, чтобы написать Ајах-приложение, необходимо 
знать Јауа$сгірі. Не имея опыта программирования на данном языке, невоз- 
можно достичь успеха в использовании Ајах. 

Теперь перейдем к рассмотрению каскадных таблиц стилей, которые поз- 
воляют контролировать визуальное представление элементов М№Меб-страницы. 
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2.3. Определение внешнего вида с помощью С$$ 


Каскадные таблицы стилей, или С85, часто используются не только в Ајах, но 
и в классических МеЬ-приложениях. С55 позволяют централизованно опреде- 
лять стили и применять их к элементам М№еБ-страницы. В дополнение к таким 
понятиям, как цвет, обрамления, фоновые изображения, прозрачность и раз- 
мер, таблицы стилей определяют способ взаимодействия элементов, в резуль- 
тате чего удается обеспечить достаточно сложные визуальные эффекты. 

В классических УеБ-приложениях таблицы стилей позволяют единожды 
определять стиль и применять его к различным Меб-страницам. Говоря об 
Ајах, мы уже не имеем в виду последовательное отображение различных 
страниц. В этом случае таблицы стилей позволяют создавать набор пред- 
определенных представлений элементов и динамически изменять внешний 
вид интерфейса, затрачивая минимальное время на кодирование. В данном 
разделе мы рассмотрим основные примеры использования С85, но прежде 
надо рассказать о том, как определяются правила С55. 

С585 задают стили документа, определяя правила. Обычно правила поме- 
щаются в отдельный файл, на который ссылается УеБ-страница. Правила 
стилей могут быть также определены в составе самой страницы, но такой 
подход не приветствуется. 

Правило стиля состоит из двух частей: селектора и обьявления стиля. 
Селектор определяет, к каким элементам относятся стили, а объявление за- 
дает свойства стилей, применяемых к этим элементам. Предположим, что мы 
хотим, чтобы заголовки первого уровня в составе документа (определенные 
посредством дескриптора <НІ>) выводились красным цветом. Для этого надо 
создать следующее правило: 


Ь1 { со1ог: теа } 


Здесь селектор имеет очень простой вид. Он сообщает о том, что данный 
стиль применим ко всем элементам <НІ>. Объявление стиля также просто; 
оно модифицирует одно свойство. На практике и селекторы, и объявления 
стилей обычно бывают более сложными. Рассмотрим их возможные разно- 
видности. Начнем с селекторов. 


2.3.1. Селекторы С$$ 


Помимо указания типов НТМГ-дескрипторов, к которым применяются сти- 
ли, мы можем ограничить правило определенным контекстом. Задать кон- 
текст молено различными способами: указывая тип НТМГ-дескриптора, тип 
класса или уникальный идентификатор элемента. 

Рассмотрим сначала селекторы, которые задают типы дескрипторов. На- 
пример, если вам надо применить рассмотренный выше стиль только к эле- 
ментам <НІ>, которые содержатся внутри элементов <П[У>, приведенное выше 
правило примет следующий вид: 


Чу №1 { со|ог: теа; } 


Такие селекторы называют также селекторами на базе элементов, так как 
при определении, должен ли стиль применяться к элементу ром, учитыва- 
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ется тип элемента. Мы можем также определять классы, которые не связаны 
с типами НТМГ-дескрипторов. Например, чтобы, определить класс с именем 
саПооі, который присутствует в цветном блоке, надо написать следующее 
выражение: 


.саПоиї { Бог4ег: зо14а Бше 1Ірх; БасКогоипа-со]ог: суап } 


Для того чтобы связать класс с элементом, надо указать в составе НТМГ- 
дескриптора атрибут с1а: 


<аіу>Г'П арреаг аз а погта! БИ оЁ їехі</аіу> 

<аіу с1аѕѕ='саПоџі'>Апа 1'11 арреаг аз а саПоиї!</аіу> 

С элементом можно связать несколько классов. Предположим, что мы 
определили класс Іооа следующим образом: 


Дома { со1ог: огапее } 


Ниже показано, как можно применить стили, определенные посредством 
классов |014 и саПоиї, к элементам документа. 

<аіу с1азз='1опа'> ГИ Бе Ббгіеһі огапве</іу> 

<аіу с1аѕѕ='саПооиі'>1'11 арреаг аз а саПоші</аіу> 


<аіу с1аѕѕ='саПоиі Іооа'> 
Апа Г’! арреаг аз ап оипарреаііпе пихаге оѓ Бо! 


Текст, соответствующий третьему элементу <іу>, будет отображаться 
оранжевым цветом в бирюзовом блоке с синим обрамлением. Для того чтобы 
улучшить внешний вид интерфейса, можно также объединять стили С85. 

Сочетая классы и правила на основе элементов, есть возможность опре- 
делять классы, которые будут воздействовать только на конкретные типы 
элементов. Например: 


ѕрап.һіеєһііеһі { БаскКэгоипа-со]ог: уеПоу } 


Этот стиль будет применим только к элементам <ѕрап>, для которых ука- 
зан атрибут һівһііеһї. К элементам <ѕрап> без данного атрибута и к элемен- 
там других типов, содержащим атрибут с1а55='һівһ1іеєһі', правило приме- 
няться не будет. 

Классы можно сочетать с указанием родительских и дочерних элементов. 


аіу.ргоѕе ѕрап.һіеһііеһе { БаскКэгоипа-со]1ог: уеПоу } 


Это правило применимо только к элементам <ѕрап> класса №1111, 
вложенным в элементы <іу> класса ргозе. 

В случае необходимости мы можем определять правила, которые относят- 
ся только к элементам, имеющим уникальный идентификатор. Этот иден- 
тификатор задается с помощью атрибута іа. Конкретный идентификатор 
может быть указан в составе не более чем одного элемента, следовательно, 
подобные селекторы выбирают в документе один элемент. Для того чтобы 
выделить специальным образом кнопку, посредством которой закрывается 
документ, можно использовать правило, подобное следующему: 


#сІоѕе { со1ог: теа } 
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С55 также позволяет определять стили на базе псевдоселекторов. В бра- 
узере определен ограниченный набор псевдоселекторов. Например, в резуль- 
тате обработки представленного ниже выражения первая буква элемента бу- 
дет иметь больший размер и отображаться полужирным шрифтом красно- 
го цвета. 

*1Ғ1г810-Іеѓег { 

Еопе-$127е: 500%; 
со1ог: геа; 
Ноа{: Іеѓї; 

Ј 

Ограничить область действия этого правила можно следующим образом: 

р.іШотіпаќеа: ігѕё-Іеїќег { 

Ғопїі-ѕіле: 500%; 
со1Іог: теа; 
Поа: Іеғі; 

} 

Теперь оно применяется только к элементам <р> класса Ши тпаеа. Ча- 
сто используются псевдоселекторы Ёігѕї-1іпе и Воуег. Последний изменяет 
внешний вид гипертекстовой ссылки, на которой располагается курсор мыши. 
Например, чтобы при наведении курсора на ссылку она выделялась желтым 
цветом, надо создать следующее правило: 


а: Пһоуег{ со1ох:уе11ом; } 


Мы рассмотрели основные принципы формирования селекторов. В при- 
мерах, иллюстрирующих сказанное, присутствовали несложные декларации 
стилей. Рассмотрим декларации подробнее. 


2.3.2. Свойства стилей 


Стиль элемента НТМГ-страницы может быть задан различными способами. 
Для универсальных элементов, например <01У>, существуют десятки спосо- 
бов указания стилей. Рассмотрим некоторые из них. 

Для текста в составе элемента можно задать цвет, размер шрифта, его 
"вес" и начертание. Если требуемый шрифт не установлен на клиентской 
машине, есть возможность заменить его одним из существующих. Для того 
чтобы абзац отображался символами серого цвета, начертание которых напо- 
минало бы текст на экране алфавитно-цифрового терминала, можно задать 
следующее правило: 

.гороёіс{ 
Ғопі-ѕіле: 14рі; 
Ғопі-Ғаті1у: соџгіег пем, соџгіегр, топозрасе; 


Ғопіё-иеісдһћі: ро1а; 
со1ог: агау; 
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Можно сократить запись, объединив элементы шрифта. 


„гоБос{ 


Гоп{: 6014 14рі соийег пем, соџгіег, топоѕрасе; 
со[ог: эгау; 

} 

В любом случае свойства стилей записываются в виде пар "ключ- 
значение", которые отделяются друг от друга точкой с запятой. 

Средствами С$$ можно задать расположение и размер элемента, опре- 
делить границы и область заполнения для каждой стороны или для всех 
четырех сторон. 

.райаеа! райаіпо: 4рх; } 

.ессепігісРаааеа { 

раааіпв-боїіќіот: 8рх; 

раа41п=-{ор: 2рх; 

раааіпе-Іеѓї: 2рх; 

раааіпе-гієвһі: 1брх; 

тагеіп: 1Ірх; 

} 

Размеры элемента задаются свойствами жіаїћ и һеівһі. Позиция элемен- 
та может быть абсолютной или относительной. Абсолютная позиция указы- 
вается с помощью свойств {ор и 1еЁ и отсчитывается в пределах всей стра- 
ницы. Относительная позиция вычисляется относительно других элементов. 

Для указания цвета фона предусмотрено свойство БасКегоипа-со]ог. 
Кроме того, можно также определить фоновое изображение, указав свойство 
Баск2тоипа-иппаэе. 


„ИЫебаг{ БаскКэгоипа-птазе: и(тазез/орБаг.рп?); } 

Элементы можно скрыть с помощью свойства уіѕіБ1іѓу:һіааеп или 
аіѕрІау:попе. Если задано выражение уіѕібііїу:һҺіааеп, элемент не отоб- 
ражается, но по-прежнему занимает место на странице, а 415 р!ау:попе пол- 
ностью удаляет элемент. 

Мы обсудили основные свойства стилей, необходимые для создания ин- 


терфейсов Ајах-приложений, а в следующем разделе рассмотрим, как молено 
применить средства С88 на практике. 


2.3.3. Простой пример использования С$$ 


Средства С$$ можно применить для создания высококачественных УБ- 
страниц, однако нас, разработчиков Ајах-приложений, больше интересует 
имитация тех компонентов пользовательского интерфейса, которые пользо- 
ватели привыкли видеть, работая с настольными системами. На рис. 2.2 по- 
казаны пиктограммы в виде папок, поддерживаемые с помощью С5$$. 

С88 выполняют две основные функции, связанные с созданием интер- 
фейсных компонентов, подобных тем, которые показаны в правом окне на 
рис. 2.2. Рассмотрим каждую из этих функций. 
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еее: 





Рис. 2.2. Применение С55 для поддержки компонентов пользовательского интерфейса. Оба окна 
сгенерированы на основе одного и того же НТМІ-документа; различаются только таблицы стилей. 
В левом окне таблицы стилей используются лишь для позиционирования компонентов, 

а в правом окне с их помощью были выбраны цвет и изображения 


Использование С$$ для размещения компонентов 


Первая из упомянутых выше задач — это позиционирование элементов. 
Для внешнего элемента, представляющего само окно, задается абсолют- 
ная позиция. 


Фу мшао\{ 
роѕіііоп: абзо1абе; 
оуегЕ1ом: аобо; 
тагодіп: 8рх; 
раааіпс: Орх; 
міаёһ: 420рх; 
Һеісдһё: 280рх; 

} 

Для пиктограмм, находящихся в области содержимого, задается свойство 
Поа, в результате чего они располагаются в границах родительского эле- 
мента один за другим. После заполнения очередного ряда элементов форми- 
руется следующий ряд. 

аіу.іёеті 

роѕіііоп: ге1аііуе; 
Һеідһі: 64рх; 
міаєһ: 5 6рх; 

Ғ1оаё: 1Іеїйё; 
рааа1та: Орх; 
паха1т: 8рх; 

} 

Элемент ќетМате, находящийся в составе элемента Цет, содержит текст, 
который располагается ниже пиктограммы. Это достигается установкой верх- 
ней границы, равной высоте графического изображения. 


аіу.іёет аіу.іёетате { 

пага1п-бор: 48рх; 

Ғопі: 1Орх уегӣапа, агіа1, Һе1уебіса; 
сехі-а1ідп: сепіег; 
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Использование С$$ для управления внешним видом компонентов 


Вторая задача, выполняемая средствами С$$, — это формирование внешнего 
вида элементов. Графическое представление элементов определяется именем 
класса, например: 
аіу.Ғо1аег { 
басКкегоопа: 


їгапѕрагепі иг! (ітавеѕ/ѓо1аег.рпе) 
фор Іеѓг по-гереаї; 


ТИИ 

раскагоопа: 

сгапѕрагепі игі (1мадез/Е11е.рпа) 

Сор Іе#і по-гереаі; 

} 

аіу.ѕресіа1 { 

Басквгоопа: 

{гапзрагепЕ игі(ітаѕеѕ/ЁҒо1аӢег ітрогѓіапі.рпе) 
фор 1еЁЁ по-гереаї; 

} 

Для свойства БасКэегоцпа стиля пиктограммы задаются значения, запре- 
шающие повторение. Изображение размещается в верхнем левом углу эле- 
мента, и для него установлено значение прозрачности. (Окна, представлен- 
ные на рис. 2.2, воспроизведены с помощью Еігеѓох. Іпіегпеѓ Ехрогег некор- 
ректно поддерживает прозрачность изображений .рп; для устранения это- 
го недостатка используются специальные приемы. В следующей версии этот 
недостаток, наверное, будет устранен. Если вам надо реализовать прозрачные 
изображения, одинаково отображающиеся во всех браузерах, надо использо- 
вать формат .э11.) 

Для конкретных элементов указаны два класса. Один из них определяет 
положение в контейнере, а второй — используемую пиктограмму. Например: 


<аіу сазз='Цет Ғо1аег'> 
<аіу с1а55='ет Мате'>5(0#</аіу> 


<аіу с1аз5=' (ет 
<аіу с1аѕѕ5='іѓіет Мате' >зпорр!пз 11$1< /41у> 


Все изображения являются фоновыми. При определении стиля заголовка 
используется изображение, высота которого равна высоте строки, а ширина — 
одному пикселю. Для этого изображения задано повторение по горизонтали. 

фу. И еБаг{ 

баскегоипа-со1ог: #006ббаа; 
БасК=гоипа-1тазе: игі (ітареѕу/їііебаг Ър.рпе); 
Баск=гоипа-гереа{: гереа{-х; 


Полностью НТМГ-код компонента показан в листинге 2.1. 


74 Часть |. Новый взгляд на ИИеБ-приложение 


Листинг 2.1. Содержимое файла міпаом.ћіті 
<һетіхһеаах> 

<!— Ссылка на таблицы стилей — > 

<ИпК ге1='51(у1еѕһееі' уре = 'ехі/еѕѕ' 
һгеѓ='уіпаому.еѕѕ' /> 

</ћеаа> 

<Боду> 

<!— Элемент окна верхнего уровня —> 

<аіу с1а55='үіпаом'> 

<аіу с[азз=' (1 [ебаг' > 

<!— Кнопки —> 

<ѕрап с|азз$='{1{1еВиоп' 1а='с1озе'Х /зрап> 
<ѕрап с1аѕѕ = '1(1еВиїїоп' 14='тах'Х /зрап> 
<ѕрап с1аѕ5='#і(1еВиїѓоп' іа='тіп'> < /ѕрап> 


<аіу с1аѕѕ = 'сопіепіѕ' > 
<аіу сІаѕѕ='іїет Ғо1аег'> 
<аіу с1аѕѕ = 'іїет Мате'> Оосоитепіѕ< /аіу> 


<аіу сІаѕѕ='іїет Ғо1аег'> 
<аіу с1аѕѕ='іїет Мате' >10$ апа ѓооџпа</аіу> 


<!— Пиктограмма в окне —> 
<аіу с1аѕѕ='іїет Ёо1аег'> 
<аіу с1аѕѕ='ііет Мате >ѕїиЁ</аіу> 


<аіу с1аѕ5='ііет 
<аіу сІаѕѕ='іќет Мате'>ѕһорріпе 1151</4іу> 


<аіу с1а55='Иет 
<аіу с1а55='іїет Мате'>1һіпеѕ.іхі< /аіу> 


<аіу с1а55='Иет ѕресіа['> 
<аіу с1аѕ5='іет М“ХМате'>Ғауеѕ</іу> 


<аіу с1а55='Иет 
<аіу с1аѕ5='1етЗМате'>сһарѓег 2</іу> 


</Љоау> 
< /Лт> 


НТМІ-разметка определяет не внешний вид, а лишь структуру докумен- 
та. Она также указывает, к каким частям документа должно быть применено 
форматирование. Для этой цели используются имена классов, уникальные 
идентификаторы и типы самих дескрипторов. Просматривая НТМГ-код, мы 
видим, например, что одни элементы содержатся в составе других, но не мо- 
жем сказать, как они будут выглядеть на экране. Редактируя таблицы стилей, 
можно изменить внешний вид документа, сохранив его структуру. Это видно 
на рис. 2.2. Таблицы стилей для компонента показаны в листинге 2.2. 
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Листинг 2.2. Содержимое файла міпаом.сѕ5 
даіу.міпаоу{ 
роѕіёіоп: а бзо1асе; 
оуегЕ1ом: аџіо; 
раскагоопа-со1ог: ЕеееЕЁЕЁЕ; 
рогаег: зо11а #0066аа 2рх; 
пагоіп: 8рх; 
рааа1та: Орх; 
/* 1 Размеры элемента */ 
міасһ: 420рх; 
Һеісдһі: 280рх; 
} 
а1іу.ёіё1ераг { 
/* 2 Текстура фона */ 
раскагоппа-со1ох: #006баа; 
раскагоипа-1таде: 
иг] (ітмадеѕ/еіє1ерак_ ро.рпӯ); 
раскагоцџпа-гереаё: гереаіё-х; 
со1ог:ићііе; 
рогаег-роёёот: ѕо11а р1аск 1рх; 
міаєһ: 100%; 
Һеідһі: 16рх; 
оуегЕ1ои:һіадеп; 





} 
зрап.(1Е1еВаЕ вол { 

роѕіёіоп: ге1аііуе; 

Һеїідһћё: 16рх; 

міаёбһ: 16рх; 

рааа1та: Орх; 

пагоіп: Орх 1рх; Орх 1рх; 

/* 3З Выравнивание */ 

Ғ1оа:гідһі; 

} 
ѕзрап.біё1еВиёёопЁтіп { 

раскагооџпа: Егапзрагепе 

ог1 (ітасеѕ/тіп.рпо) бор 1еЁЕ по-гереаё; 
} 
зрап.ёіё1еВиіёоп#тах { 

раскагоцпа: Егапзракепе 

ог1 (ітасеѕ/тах.рпод) бор Іе#і по-гереаі; 
} 

срап . (11 еВоесоп#сТозе { 

раскогоцпа: Егапзракепе 





џг1 (1мадез/с1озе.рпа) бор 1еЁс по-гереае; 


} 
аіу.сопёепёѕ { 
раскогооџпа-со1ог: #е0е4е8; 
оуекЕ1ом: аџіо; 
рааа1та: 2рх; 

Һеїідћё :240рх; 

} 
Алу .16ем{ 

роѕіііоп : ге1аііуе; 
Һеїідһё : 64рх; 
міаєһ: 56рх; 

Ғ1оаі: Іеї; 
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со1ог : #004488; 

Ғопё-ѕіле: 18; 

рааа1та: Орх; 

тагодіп: 4рх; 

} 
аіу.іёет Ч1у.1сепМаще { 

/* 4 Позиционирование текста */ 
пага1п-вор: 48рх; 

Еопе: 10рх уегаапа, агіа1, һе1уеііса; 
сехё-а1ідп: сепіег; 

} 
аіу. Ёо1аех { 

раскагоцпа: ігапѕракепі 

џг1 (іютадеѕ/ Ёо1дӢег.рпо) Бор 1ІеЁі по-гереае; 
} 
Алу. Е11е{ 

Баскегоип4: їгапѕрагепі 
иг1(ітаѕеѕ/Ғ1е.рпе) {ор 1еЁ по-гереаї; 
} 
аіу.ѕресіа1{ 

раскогоиџпа: {гапзрагепе 
иг1(ітавеѕ/Ёо1аег ітрогѓапё.рпе) 

фор 1еЁ по-гереат; 


Мы уже рассмотрели ряд приемов, примененных в составе данных таблиц 
гилей и предназначенных для форматирования внешнего вида конкретных 
лементов. В листинге мы также отметили фрагменты, демонстрирующие 
озможности С55: размещение на экране О, текстура ©, взаимное располо- 
сение элементов © и позиционирование текста относительно графики О. 

С85 — важный элемент набора инструментальных средств для разработ- 
и УеБ-приложений. Как было показано выше, каскадные таблицы стилей 
южно применить не только для настройки внешнего вида отдельных Мер- 
границ, но и для формирования пользовательского интерфейса, что имеет 
олыное значение при разработке Ајах-приложений. 


\Л. Организация просмотра с помощью РОМ 


ЮМ (Юроситепі Објесі Моде!) представляет документ (\№-страницу) 
роцессору ЈауаЅсгірі. Благодаря РОМ появляется возможность управ- 
ять структурой документа (рис. 2.3) из программы. Такая возможность 
райне важна для разработчиков Ајах-приложений. В классическом МебБ- 
риложении все содержимое окна браузера регулярно обновляется при по- 
учении с сервера потока, содержащего НТМІ-данные. Подготавливая но- 
ый вариант документа, можно существенно изменить интерфейс. В Ајах- 
риложении большая часть изменений интерфейса осуществляется с помо- 
шю РОМ. НТМЕ-элементы в составе МеЬ-страницы составляют древовид- 
ую структуру. Корнем данного дерева является дескриптор НІМІ, который 
редставляет весь документ. В нем содержится элемент ВОЮҮ, соответству- 
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Рис. 2.3. НТМЕ-документ представляется средствами 
ООМ как древовидная структура, каждый элемент 
которой соответствует НТМЕ-дескриптору 





ющий телу документа. Он, в свою очередь, является корнем отображаемой 
структуры. В теле документа находятся таблицы, абзацы, списки и прочие 
элементы, которые могут содержать другие дескрипторы. 
РОМ-представление У\еБ-страницы также имеет древовидную структу- 
ру, составленную из элементов, или узлов, которые содержат дочерние уз- 
лы, и т.д. Процессор Јауа$Ѕсгірі представляет корневой узел текущей У№Б- 
страницы посредством глобальной переменной іоситепі, которая выполняет 
роль стартовой точки для всех действий с ПОМ-данными. Структуру РОМ 
определяет спецификация МЗС. Для каждого элемента древовидной струк- 
туры существует один родительский элемент, любое, в том числе нулевое 
количество дочерних элементов, и любое количество атрибутов, хранящих- 
ся в ассоциативном массиве (т.е. массиве, для которого ключевым значением 
является не числовой индекс, а текст). На рис. 2.3 показана структура до- 
кумента, код которого был представлен в листинге 2.2. Данная структура 
отображается с помощью инструмента Мо7Ша РОМ ГШазресфог (подробно он 
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рассмотрен в приложении А). 

Взаимосвязь элементов РОМ отражает структуру НТМГ-документа 
и является двухсторонней. Изменение структуры РОМ влияет на НТМІ- 
разметку и, следовательно, на представление страницы. 

Так выглядит РОМ "на верхнем уровне". В следующем разделе вы увиди- 


те, как структура РОМ представляется интерпретатору ЈауаЅсгірїі, и узнаете, 
как выполнять с ней требуемые действия. 


2.4.1 Обработка РОМ с помощью Чауа$спрЕ 


В процессе работы пользователя с любым приложением возникает необходи- 
мость изменять интерфейс. Это надо, например, для того, чтобы обеспечить 
обратную связь с пользователем (он должен видеть реакцию на свои дей- 
ствия). Изменения могут потребоваться любые: замена текста статической 
метки или цвета одного из элементов, вывод диалогового окна и даже об- 
новление значительной части окна и вывод нового набора компонентов. Ча- 
ще всего приходится создавать древовидную структуру РОМ, предоставляя 
браузеру НТМГ-данные (другими словами, формировать У Ъ-страницу). 
Документ, который был показан в листинге 2.2 и на рис. 2.3, достаточ- 
но сложен. Мы же начнем обсуждение действий с РОМ на простом приме- 
ре. Предположим, что нам необходимо вывести приветствие пользователю. 
При первой загрузке страницы мы еще не знаем его имени, поэтому нам 
понадобится изменить структуру документа несколько позже, добавив имя 
пользователя. Воздействовать на узлы РОМ, вероятнее всего, придется из 
программы. В листинге 2.3 показан НТМГ-код простой М№еБ-страницы. 


Листинг 2.3. Страница Ајах-приложения Пе|о 
<> 

<һеаа> 

<1— О Ссылка на таблицы стилей —> 
<ИпКк ге|='5{у1езВее{’ уре = '#ехї/еѕѕ' 
БгеЕ< • ҺеПо.еѕѕ. /> 

<1— © Ссылка на ЈауаЅсгірі-сценарий —> 
<ѕсгірі їуре = 'ќехї/јауаѕсгірі' 

ѕгс= 'һҺе11о.ј $'> < /ѕсгірі> 

</ћеаа> 

<Боаӣу> 

<р іа= 'ҺеПо'>ҺеПо</р> 

<! — © Пустой элемент —> 

<аіу іа= 'етріу'х/аіу> 

</Боду> 

</һёт1> 





В документе содержатся ссылки на два внешних ресурса: каскадные таб- 
лицы стилей О и файл, содержащий ЈауаЅсгірі-код ©. Мы также определили 
пустой элемент іу с идентификатором ©. С помощью программы мы можем 
5ключить в его состав другие элементы. 

Рассмотрим ресурсы, на которые ссылается документ. В С$5-файле опре- 
делены простые стили, позволяющие выделять пункты списка и изменять 
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шрифт и цвет. Содержимое С55-файла приведено в листинге 2.4. 


Листинг 2.4. Содержимое файла Пе|По.с$$ 
.аесІагеа{ 

соІог: геа; 

Ғопё-Ғаті1у: агіа1; 

Ғопё-меідһі: погта1; 

Ғопё-ѕзіхе: 16рх; 


.ргодгаппеа! 

со1ог: Б1ае; 

Ғопё- Ғаті1у: һе1уебіса; 
Ғопё-иеісһћё: ро1а; 
Ғопё-ѕіле: 10рх; 


Мы определили два стиля для исходных ООМ-узлов. (Имена стилей 
могут быть произвольными. В данном случае мы выбрали их так, чтобы 
упростить восприятие примера, но с таким же успехом мы могли использо- 
вать имена ге и јіт.) Ни один из этих стилей не используется в НТМГ- 
доукменте, но они могут быть применены к элементам в результате выполне- 
ния программы. В листинге 2.5 показан Лауабсир-код для страницы, пред- 
ставленной в листинге 2.4. Когда документ загружается, программа связы- 
вает стиль с существующим узлом и создает новые РОМ -элементы. 


Листинг 2.5. Содержимое файла Пе|о. ] $ 
мтіпаот. оп1оаа= Ёопсёіоп () { 

// Получение элемента по идентификатору 
уаг һе11о=аоситепё .деёЕ1емепёВута ('һе110') ; 
Һе110о.с1аѕѕМапе='дес1агеа' ; 

уаг епрЕу=Чоситепе .десЕ1етептеВуТа ('епріу' ); 
адамоае (етрёу, "геайег оЁ") ; 

ааамоае (етрЕу, "Ајах іп Асііоп!"); 

уар сһі1агеп=епріу.сһі1аМодеѕ; 

Ғор (уар 1=0;і<сһі1агеп.1еподіһ;і++) { 
сҺі1агеп [1] .с1іаѕѕмМатме= 'ргосдгатпеа' ; 

} 

// Непосредственная установка стилей 

епріу .ѕбу1е.рогӣаег='ѕо1іа дгеер 2рх'; 

епріу . ѕбу1е.міаєһ= "200рх"; 

} 
Ғопсёіоп аааМоае (е1 ‚сехь) { 

// Создание нового элемента 

уаг сһі14Е1=Яӣоситмепі . сгеасеЕ1епмепі ("діу"); 
е1 .аррепасһі1а(сһі1ав1); 
// Формирование текста 
уаг іхЕМоде=досиопепё . сгеаёеТехЕМоае (ёбехё) ; 
сһі1аЕ1.аррепасһі1а (Е хЕМоае); 
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Код ЈауаЅсгірі сложнее для восприятия, чем НТМГ-документ или стили. 
Точкой входа в данном случае является функция уіпаоу.опіоаа(), которая 
вызывается после загрузки всей страницы. К этому моменту древовидная 
структура РОМ уже сформирована, и мы можем начинать работу с ней. 
В листинге 2.5 имеется несколько методов, предназначенных для модифика- 
ции структуры РОМ. В частности, с их помощью можно изменять атрибу- 
ты, скрывать и вновь отображать РОМ-узлы и даже создавать в процессе 
выполнения программы новые узлы. Мы не будем останавливаться на каж- 
дом методе (подробную информацию о них вы сможете найти в источниках, 
ссылки на которые приведены в конце главы), а ограничимся рассмотрением 
в последующих разделах некоторых, используемых наиболее часто. 


2.4.2. Поиск узла РОМ 


Первое, что надо сделать для того, чтобы изменить структуру РОМ из 
ЈауаЅсгірі-программы, — найти элементы, которые следует модифицировать. 
Как было сказано ранее, в начале работы мы имеем лишь ссылку на корне- 
вой узел в глобальной переменной оситепїі. Все остальные узлы РОМ яв- 
ляются дочерними (или более отдаленными потомками) аоситепі. Органи- 
зовать пошаговый просмотр древовидной структуры большого документа — 
достаточно сложная задача. К счастью, ее можно упростить. Один из самых 
распространенных приемов — пометить элемент уникальным идентифика- 
тором. В функции ошоа@О, код которой показан в листинге 2.5, мы орга- 
низуем поиск двух элементов: абзаца, стиль которого изменяем, и пустого 
элемента <Фу>, в состав которого включаем новые элементы. В открыва- 
ющем дескрипторе каждого из этих элементов мы с помощью атрибута іа 
задаем идентификатор. 


<р 14='веПо'> 


<аіу іа='етріу ></іу> 


С каждым ОРОМ -узлом можно связать идентификатор и использовать его 
при вызове функции, как показано ниже. 


уаг һеПо=оситепі.ғеіЕІетепіВу1а4('ћеПо!) ; 


Заметьте, что данный метод принадлежит объекту Ооситеп. В простых 
случаях, подобных рассматриваемому, молено ссылаться на текущий объект 
"Юоситепі посредством переменной ӣоситепі. При использовании ІЕгате по- 
является несколько объектов Поситеп, и приходится внимательно следить 
за тем, к какому из них осуществляется обращение. 

В некоторых ситуациях необходимо организовать пошаговый обход дере- 
ва РОМ. Поскольку узлы РОМ организованы в виде древовидной структу- 
ры, каждый узел может иметь один родительский узел и любое число до- 
черних узлов. Доступ к ним осуществляется с помощью свойств рагепїћ- 
ойе и спПаМ№ о4ез. Свойство рагеп \о4е ссылается на другой объект РОМ, 
а соПаМо4ез$ — на ЈауаЅсгірі-массив узлов, которые приходится просматри- 
вать по очереди. 
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уаг сһіагеп=етріу.сһі1а М№Моайезѕ; 
Гог (уаг 1=0; Ксһі1агер.Іепеіһ;і++){ 


Если требуемый узел не помечен уникальным идентификатором, поиск 
его осуществляется по-другому: с помощью функции зе ЕМметеп5ВуТа Мате. 
Например, в результате вызова ӣоситепі.веіЕІетепіѕВу Тае Мате("ОТ”) бу- 
дет возвращен массив элементов ЦТ, присутствующих в документе. 

Последний способ применяется при работе с документом, структуру кото- 
рого разработчик не может контролировать. Считается, что функция веѓЕ1е- 
тепіВу1а дает более надежные результаты, чем ›еЕ/летепВуТа»Маште (), по- 
скольку при ее использовании не приходится учитывать структуру докумен- 
та, которая может измениться. 


2.4.3. Создание узларом 


Помимо модификации существующих узлов, может возникнуть необходи- 
мость создавать новые узлы и включать их в текущий документ (например, 
в процессе работы программы может потребоваться сформировать сообще- 
ние). ЈауаЅсгірі-реализация РОМ предоставляет методы для решения этой 
задачи. 

Вернемся к листингу 2.5. В начале работы узел с идентификатором етріу 
пуст. Когда документ загружается, мы динамически формируем содержи- 
мое этого узла. В функции айіћоае () вызываются стандартные методы 4ос- 
итепі .сгеаѓїеЕІетепі() и аоситепі.сгеаѓеТехіМоае(). Метод сгеаѓеЕ1е- 


теп (), которому в качестве параметра передается тип дескриптора, созда- 
ет НТМЕ-элемент. 


уаг сҺШаЕ1=аоситепї.сгеаѓіеЕіетепі("аіу") ; 


Метод сгеаѓеТехі\оае () формирует ООМ-узел, представляющий фраг- 
мент текста. Этот узел обычно является дочерним по отношению к заголовку, 
элементу іу, абзацу или пункту списка. 


уаг іхіМоӢе=аоситепї.сгеаѓеТехіМоайе("ѕоте ех"); 


Согласно стандарту РОМ текстовые узлы отличаются от узлов, представ- 
ляющих НТМІ-элементы. К ним нельзя непосредственно применять стили, 
поэтому они занимают меньше памяти, чем обычные узлы. Стиль текста, со- 
ответствующего текстовому узлу, определяется стилем родительского РрОМ- 
элемента. 

Чтобы созданный узел мог отображаться в окне браузера, его надо вклю- 
чить в состав документа. Для этого предусмотрен метод аррепасһі1а(). 


е1.аррепасһіа(сһіаеЕі) ; 
Методов сгеаїеЕІетепі(), сгеаїеТехіМоае() и аррепасһіа() достаточ- 


но для добавления новых узлов в документу. Однако новые узлы нуждаются 
В СТИЛЯХ. Рассмотрим, какими способами можно добавить их. 
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2.4.4. Добавление стилей к документу 


До сих пор мы говорили о средствах, влияющих на структуру документа, 
и научились изменять статические НТМТ-данные. Кроме того, разработчику 
доступны методы, позволяющие изменять структуру таблиц стилей и, следо- 
вательно, модифицировать из программы стили элементов. 

Выполняя действия с РОМ, можно реализовать ряд визуальных эффек- 
тов для каждого элемента, например, задать его позицию, размеры, цвет, 
границы и обрамление. Модификация отдельных атрибутов позволяет управ- 
лять деталями отображения, однако эта процедура достаточно утомительна. 
У\еБ-браузеры предоставляют средства, обеспечивающие необходимую точ- 


ность при управлении интерфейсом из ЈауаЅсгірі-программы. Рассмотрим 
их более подробно. 


Свойство сіаѕѕ$Мате 


Если элементы стилей созданы в результате выполнения кода программы, мы 
можем воспользоваться свойством сІаѕ$ Мате узла РОМ. Ниже приведена 
строка кода, в результате выполнения которой к узлу применяются стили, 
определенные посредством класса дес1агеа. 

ҺеПо.с1аѕѕ Мате='ӣесІагей' ; 


Здесь һеПо — это ссылка на узел РОМ. Таким способом можно связывать 
с узлом любое количество правил С$$ и управлять сложными стилями. 


Свойство ѕїуІе 


В некоторых случаях бывает необходимо изменить стиль конкретного эле- 
мента, т.е. модифицировать стиль, уже заданный средствами С5$. 

С каждым узлом РОМ связан ассоциативный массив $1у1е, содержа- 
щий информацию о стилях, установленных для данного узла. Как видно на 
рис. 2.4, в массиве стилей ООМ -узла обычно содержится большое число эле- 
ментов. Заметьте, что при присвоении значения свойству с1аз$Мате узла ав- 
томатически модифицируются значения в массиве ѕїу1е. 

Значениями массива $1у1е можно управлять непосредственно. Ниже по- 
казано, как отобразить рамку вокруг узла етрїу, задавая его стили. 


етриу.5{У1е.Бог4ег="зоПА ргееп 2рх"; етрїіу.ѕіуІе.міаі="200рх"; 


Мы можем определить класс бох и применить его посредством свойства 
сІаѕ$ Мате, но в ряде случаев описанный здесь подход проще и позволяет 
получить результаты быстрее. Кроме того, он позволяет формировать необ- 
ходимые строки в программе. Если нам надо изменять размеры элементов 
с точностью до пикселя, то определять стили для значений ширины в интер- 
вале от 1 до 800 слишком сложно и неэффективно. 

Используя рассмотренные выше способы, мы можем создавать новые эле- 
менты РОМ и определять их стили. Существует еще один инструмент, поз- 
воляющий управлять содержимым документа. Он реализует альтернативный 
подход к решению задачи формирования У№еБ-страницы с помощью програм- 
мы. Рассмотрим свойство шпегНТМЕГ. 
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РОМ Іпѕресїог. Большинство значений было установлено по умолчанию. Обратите внимание на 


полосу прокрутки: на экране отображается приблизительно четверть всех поддерживаемых 
стилей 


2.4.5. Свойство тпег/нТМЁ 


Описанные выше методы обеспечивают управление структурой РОМ на низ- 
ком уровне. Методы сгеже Е !етепЕ () и аррепасћһі1а() лучше всего подходят 
тогда, когда документ имеет регулярную структуру и процедура создания до- 
кумента легко формализуема. Все популярные браузеры поддерживают так- 
же шипегНТМЕ, — свойство ООМ-элементов. Это свойство позволяет без тру- 
да включить в состав элемента произвольное содержимое. Значением свой- 
ства іппегНТМІ, является строка, представляющая дочерние узлы в формате 
НТМІ. Используя данное свойство, мы можем переписать функцию ад4Моде 
следующим образом: 


РапсНоп ааа 1ѕ4ет Оше шпегНТМТ (1. 1ех{){ 

о с1аз5='ргогатте4' >" {ех{+"</а1у>"; 

Элемент ЧУ и содержащийся в нем текстовый узел можно добавить с по- 
мощью одного выражения. Заметьте также, что строка не присваивается 
свойству непосредственно, а добавляется к нему с помощью оператора +=. 
Чтобы удалить узел путем редактирования свойства шпегНТМГ, надо из- 
влечь значение и организовать его разбор. Свойство іппегГНТМІ, применимо 


84 Часть. Новый взгляд на Мер-приложение 


для сравнительно простых задач. Если необходимо обеспечить многократные 
изменения узла из программы, целесообразнее воспользоваться рассмотрен- 
ными ранее средствами. 

Мы рассмотрели технологии Јауа$сгірі, С$$ и РОМ, которые давно из- 
вестны как Оупатіс НТМГ. Как было замечено в начале данной главы, Ајах 
использует многие средства, характерные для Юрупатіс НТМГ, но, кроме то- 
го, реализует принципиально новые возможности. В следующем разделе мы 
рассмотрим механизм, отличающий Ајах от ОНТМГ, — средства взаимодей- 
ствия с сервером в процессе работы пользователя. 


2.5. Асинхронная загрузка с использованием ХМЁ 


При работе с приложением, в особенности независимым, взаимодействие 
с ним является частью процесса решения задачи, поставленной перед пользо- 
вателем. В главе 1 мы говорили о том, насколько важен хороший интерфейс. 
Если на время выполнения длительных вычислений приложение перестает 
реагировать на действия пользователя, последнему неминуемо приходится 
отвлекаться от решения основной задачи. Мы также обсуждали преимуще- 
ства асинхронных вызовов и способы обеспечения отклика программы при 
сложных вычислениях и выяснили, что вследствие неустранимой задержки, 
связанной с работой в сети, все обращения к серверу следует считать дли- 
тельными операциями. Мы также обратили ваше внимание нато, что модель, 
предполагающая обмен в виде НТТР-запросов и ответов на них, не позволяет 
создавать интерфейсы высокого качества. В классических МеБ-приложениях 
каждое обращение к серверу сопровождается полным обновлением текущей 
У\еБ-страницы, в результате чего нормальная последовательность действий 
пользователя часто прерывается. 


Несмотря на то что мы не можем сократить время, которое проходит от 
передачи запроса серверу до получения ответа от него, существуют способы 
передачи запросов в асинхронном режиме; при этом пользователь может про- 
должать работу с приложением. Первой попыткой решить подобную задачу 
было взаимодействие в фоновом режиме с использованием элементов І Егате. 
Впоследствии было найдено лучшее решение — использование объекта ХМІ- 
НіірКедиеѕі. Ниже мы рассмотрим обе технологии. 


2.5.1. Элементы ІЕгате 


С появлением четвертой версии браузеров Ме зсаре Мау1еатог и Мсгозой ш- 
ќегпеї Ехрогег стали доступны средства ОНТМГ, обеспечивающие возмож- 
ность компоновки У\еБ-страницы из программы. Естественным расширением 
системы фреймов НТМГ стал элемент І Егате. В его названии первая буква 
условно означает іп/іпе (встроенный), т.е. фрейм является элементом другого 
документа, а не его полноправным "соседом". ІЕтате представляется как эле- 
мент древовидной структуры РОМ, а это значит, что его можно перемещать, 
изменять размеры и даже скрыть, причем остальная часть страницы оста- 
нется видимой. Тот факт, что с элементом І Егате можно связывать стили 
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Рис. 2.5. Последовательность событий, возникающих при асинхронном 
взаимодействии документа с сервером. В результате действий пользователя 
формируется асинхронный запрос серверу от скрытого объекта (1Егате или 
ХМІНіїрВеаиеѕї). Метод очень быстро возвращает управление, блокируя 
интерфейс лишь на короткий период времени (этот интервал выделен серым 
цветом). Функция обратного вызова осуществляет разбор ответа сервера и затем 
обновляет пользовательский интерфейс 


и делать его невидимым, открывает большие возможности в создании поль- 
зовательских интерфейсов. Так, например, данные можно загружать в фо- 
новом режиме, не затрагивая остальных элементов У\!еБ-страницы. По сути, 
это способ асинхронного взаимодействия с сервером, правда, пользоваться 
им несколько неудобно. На рис. 2.5 показана последовательность событий, 
типичная для данного подхода. 

Подобно другим элементам РОМ, ІЕгате можно объявить в соста- 
ве НТМТ-кода страницы либо сгенерировать программно, вызвав Яоси- 
тепе . стеаеЕ!етепЕ (). В простых ситуациях, когда нам нужен один неви- 
димый элемент ІЕгате для загрузки данных, мы можем объявить его как 
часть документа и получить доступ к нему из программы, вызвав Яӣоси- 
тепі. веїЕ1етепіВу14(), как показано в листинге 2.6. 


Листинг 2.6. Использование элемента ІЕгате 

<Һет1> 

<Беаа> 

<зск1рЕе ёбуре= ' ‘бех /јамуаѕсгірі'> 

міпаӢох. оп1оаа= Ёџипсёіоп () { 

уар і Ғгате=дӢоситпепі . деёЕ1етепёВуІа ('даёағҒееа') ; 
уах ѕгс= ' дӢаёаҒееаѕ /шуааѓба.хті'; 
1оаараёсадѕупсһгопоицѕ1у (1Ехаме, гс) Н 








Гапс оп 1ІоаараѓаАѕупсһгопои5ѕ1у(іѓгате, ѕгс) { 
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// Выполнение требуемых действий 
} 

< /ѕсгірїі> 

</ћеаа> 

<Боду> 

<!— Отображаемые данные —> 
<Игаше 

іа = 'ааѓа Еееа' 

ѕѓу1Іе= 'һеірһі: Орх;міаћ: Орх; ' 
> 

</іЕкапе> 

</роау> 

</ВЕт1> 


Сделать элемент ІЕгате невидимым можно, установив для него нулевую 
ширину и высоту. Можно также использовать стиль 415$ р1ау:попе, но неко- 
торые браузеры в этом случае оптимизируют свою работу и не загружают 
документ. Заметьте, что перед обращением к ІЕгате надо дождаться окон- 
чания загрузки документа, т.е. вызов се Е]етепВу1АО следует поместить 
в обработчик \ушао\, опіоаа. Можно также генерировать элементы ІЕгате из 
программы, как показано в листинге 2.7. В этом случае весь код, связанный 
с передачей запроса, находится в одном месте, и нет необходимости указы- 


вать уникальный идентификатор узла РОМ и согласовывать его в сценарии 
и НТМЕ-файле. 


Листинг 2.7. Создание элемента ІЕгате 

Ғопсёіоп Ёеёсһраёба () { 

уаг 1Егаме=аосимепе . сгеаёбеЕ1етмепё ('1ЁЕхаше') ; 
і гате. с1аѕѕМаме= 'ҺіааепраёаҒееа'! ; 

дӢосотепё . роду . аррепасћі1а (і гате) ; 

уаг ѕгс='даёаҒееаѕ /пудаёа.хт1'; 
1оаараёсадѕупсһгопоицѕіу (іЁкгатме, гс); 











Методы сгеаїеЕ1Іетепі и аррепасћһіа, используемые для модификации 
структуры РОМ, уже знакомы вам по предыдущим примерам. Если мы бу- 
дем не задумываясь применять данный подход в процессе работы приложе- 
ния, то получим большое число элементов [Егате. Необходимо удалять их по 
завершении работы или формировать пул элементов. 

Образы разработки, которые мы рассмотрим в главе 3, помогут вам в ре- 
ализации пулов, очередей и других структур, которые могут быть использо- 
ваны для масштабных приложений. Эти вопросы мы рассмотрим несколько 
позже, а сейчас перейдем к следующему набору технологий, используемых 
для формирования асинхронных запросов к серверу. 


2.5.2. Объекты ХтШоситеп| и ХМІНїрВедиеѕі 


Элементы ІЕгате можно использовать для получения данных в асинхронном 
режиме, но сделать это достаточно сложно, так как изначально они были 
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созданы для другой цели. В последних версиях популярных У\еБ-браузеров 
реализованы специальные объекты, предназначенные для асинхронной пере- 
дачи данных. Они обеспечивают ряд преимуществ по сравнению с элемента- 
ми ГЕгате. 

Объекты ХиОоситей и ХМЕНИрКеаче$, хотя и представляют собой 
нестандартные расширения РОМ, поддерживаются большинством браузеров. 
Поскольку они специально разработаны для фоновой загрузки данных, с их 
помощью удобно осуществлять асинхронные вызовы. Оба объекта сначала 
были реализованы как компоненты АсйуеХ, доступные в браузере Пиегпе 
ЕхрІогег посредством ЈауаЅсгірі. Для других браузеров были реализованы 
объекты, обеспечивающие те же возможности. Объекты Хиоситей и ХМІ- 
НИрКеачцез{ предоставляют приблизительно одинаковые возможности, но 
ХМІНірКедиеѕі обеспечивает более полный контроль над запросом. Именно 
его мы будем в основном использовать в данной книге, но уделим внимание 
и объекту Хи оситепь чтобы вы смогли оценить его и сравнить с объек- 
том ХМЕНИрКеацез. В листинге 2.8 показан код простой функции, которая 
создает объект Хиоситеп. 


Листинг 2.8. Функция ѕеХМІ.Ооситег () 
Ғопсііоп веХМІ. Ооситепі(){ 
уаг х)ос=пи|; 
Ш (аӢоситепі.ітріетепќаііоп 
5 & аоситепі.ітріететліайоп.сгеаѓіе Ооситепї){ 


хЮос=оситепі.ітріетепѓіайоп 
// Мох2Ша/Ѕағагі 


.сгеаїеОоситепі("", "", пи); 

}е1зе Ш ({уреоЁ АсіуеХОЫјесі != "ипаебпеа"){ 
уаг пзХиШАх==пий; 

{гу{ 


изхи1Ах=пем АсёіуеХОрјесі 

// Последние версии Іпіегпеё Ехр1огег 
("Мѕхт12 .РОМБосчмепе"); 

}саёсһ (е) { 

изхи1Ах=пем АсёіуеХОрјесё 

// Старые версии Іпёегпеі Ехр1Іогег 
("Мехтмі . рОМросотмепі"); 








хрос=изХи1Ах; 

} 

1Е (хрос==пи11 М буреоЕ хрос.1оаЯ=="опаеЕ1теа") { 
хрос=пи11; 


тебати хрос; 
} е 


Данная функция возвращает объект ХиШОоситепе с АРІ, идентичным для 
большинства современных браузеров. Однако способы создания документа 
могут существенно различаться. 
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Функция проверяет, предоставляет ли объект документа возможности, 
необходимые для создания объекта Хиоситепе (подобные средства имеют- 
ся в последних версиях браузеров МохШа и Ѕаѓагі). Если необходимые сред- 
ства не предоставляются, функция пытается обратиться к объектам АсйуеХ 
и проверяет, поддерживаются ли они (такая поддержка реализована толь- 
ко в браузерах производства Місгоѕоћ). Если проверка дает положительный 
результат, функция пытается извлечь требуемый объект. Предпочтение от- 
дается библиотекам МХМІ. версии 2. 


На заметку Из программы можно запросить информацию о производите- 
ле браузера и номер версии продукта. Очень часто таким обра- 
зом производится настройка кода на конкретный тип браузера. 
На наш взгляд, подобный подход чреват ошибками. Кроме то- 
го, таким образом невозможно предусмотреть работу с более 
новыми версиями браузеров. В нашей функции эеХшШосч- 
теп () мы не пытаемся узнать версию клиентской программы, 
а непосредственно выясняем, доступен ли конкретный объект. 
Такой подход, называемый обнаружением обьектов (објесі ае- 
{есйоп), увеличивает вероятность того, что программа будет 
нормально работать с последующими версиями браузеров и те- 
ми браузерами, наличие которых мы не учли при написании 
программы. 


В листинге 2.9 показана функция, подобная предыдущей, но ориентиро- 
ванная на объект ХМЕНИрВеаце. 


ЛИСТИНГ 2.9. Функция 2 ХМЕНТТРВедие () 


Ғопсіоп 2еХМЕНТТРКеаие 0 { 

уаг хКедиеѕі= пи; 

Ш (міпаӢоу.ХМІ.НерВедиеѕі) { 

// Мох Ша/Ѕаѓагі 

хКедџеѕі=пеу ХМЕНИрВеачце$(); 

}е1зе Ш (уреоЁ АсіуеХОбЫјесї != "ипаейпеа"){ 
хКедаџеѕќ=пеу АсіуеХОбЫјесі 

// Имегпеё ЕхрІогег 

("Мсгозой.ХМЕНТТР"); 


геёигп хВеачезе; 


Здесь мы также используем принцип обнаружения объектов, чтобы прё- 
верить, поддерживается ли ХМ НИрКеаиея. Если проверка дает отрицатель- 
ный результат, мы пытаемся обратиться к АсіуеХ. Если браузер не предо- 
ставляет ни одну из проверяемых возможностей, функция возвращает значе- 
ние пи]. О более детальной обработке отрицательного результата проверки 
речь пойдет в главе 6. 

Итак, мы можем создать объект, который передает запросы серверу. По- 
пробуем использовать его. 
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2.5.3. Передача запроса серверу 


Объект ХМІ.НірКедиеѕі позволяет без труда передать запрос серверу. Все, 
что надо для этого, — это указать ОКІ. серверного ресурса, который должен 
сгенерировать необходимые данные. Ниже представлена функция, которая 
решает эту задачу. 
Ғопсйоп зепаКеачез (иг, рагатз, НИрМе!оа){ 
і? ИНирМефоа)}{ 
НќрМењоа="РОЅТ";) 
уаг теа=гехмЕНТТРКеацез((); 
1 (тед)! 
геа.ореп(НИирМео4, игі, {гие); 
геа.зеКеаиеНеааетг 


("Сопќепі- Туре", "аррИсаНоп/х-мм\-Югт-иШепсодеа"); 
гед.ѕепа(рагатзѕ); 


} 
} 


Объект ХМЕНИрКеаие$ предоставляет широкий спектр возможностей 
для работы с протоколом НТТР, в том числе позволяет указывать строку 
параметров для динамически генерируемых документов. (Эти параметры об- 
рабатываются ССІ-сценарием, объектом ЅегуІеіКедиеѕі или другой сервер- 
ной программой.) Рассмотрим основы протокола НТТР, а затем поговорим 
о том, как объект, передающий запросы серверу, работает с ним. 


Общие сведения о протоколе НТТР 


Протокол НТТР настолько привычен, что мы часто забываем о его существо- 
вании. При написании классических №бЬ-приложений наши действия с дан- 
ным протоколом ограничиваются определением гипертекстовых ссылок и, 
возможно, установкой атрибута тео формы. Ајах, напротив, предоставля- 
ет разработчикам доступ к низкоуровневым средствам работы с протоколом 
НТТР, использование которых открывает удивительные возможности. 

НТТР-транзакция представляет собой запрос браузера, за которым сле- 
дует ответ сервера. (Конечно, в процессе обработки запроса, помимо стан- 
дартных серверных средств, могут участвовать сложные программы, напи- 
санные нами, У’ Ъ-разработчиками.) И запрос, и ответ передаются в тек- 
стовом виде; каждый из них состоит из заголовка, за которым следует тело 
запроса или ответа. Заголовок можно условно представить себе как адрес, на- 
писанный на конверте, а тело запроса или ответа — как содержащееся внутри 
письмо. Заголовки указывают принимающей стороне на то, что надо сделать 
с остальными данными. 

НТТР-запрос чаще всего состоит из одного заголовка, однако в некоторых 
случаях за ним могут следовать данные. В составе ответа обычно содержится 
НТМГ-код страницы, указанной в запросе. С браузерами Мо7Ша поставля- 
ется полезная утилита под названием МуеНТТРНеадегз (см. ссылки в конце 
данной главы и приложение А). Она позволяет просматривать заголовки за- 
просов и ответов в процессе работы браузера. Загрузим исходную страницу 
Ооо е и посмотрим, что произойдет при этом. 
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Переданный нами запрос содержит следующий заголовок: 


ОЕГ / НТТР/1.1 

Ноѕі:  у\м\.200е.сош 

Оѕег-Арепі: Мо7Ша/5.0 

(УЛпао\з; 0; УМпаомз МТ 5.0; еһ-05; гу:1.7) 
Сеско/20040803 Е1шегох/0.9.3 

Ассер: їехі/хт!,арріісайоп/хті, 
арріісаійоп/хһіті+хті1,ќехі/һ1;9=0.9, 
ќехі/рІаіп;а=О.8,ітаве/рпе,*/*;9=0.5 
Ассері-Гапеџаре: еп-иѕ,еп;а=0.5 
Ассері-Епсоаіпе: ртхір,аӢейаѓе 
Ассерї-Сһагѕе: 150-8859-1,01#-8;4=0.7,*;4=0.7 
Кеер-АПуе: 300 

Соппесііоп: Кеер-аПуе 

Соокіе: РКЕЕ=10=сабаз8877ас0ьба:ТМ=1116601572 
1.М=1116601572:5=С 03550КЗу0ааєѕВР 


Первая строка заголовка сообщает о том, какой НТТР-метод должен быть 
использован. Большинство разработчиков МеБ-приложений знакомы с запро- 
сами СЕТ и РОЗГ. Запрос СЕГ используется для загрузки документов, а РОЅТ 
чаще всего применяется для передачи на сервер данных, введенных посред- 
ством НТМГ-форм. В спецификации, разработанной МЗС (Копа Мае М№еЬ 
Сопѕогйіит), предусмотрены и другие методы, в частности, НЕАО, который 
загружает только заголовок; РОТ, предназначенный для передачи докумен- 
тов на сервер; и РЕГЕТЕ, посредством которого можно удалять документы. За 
первой строкой следуют поля заголовка, с помощью которых клиент сообща- 
ет серверу тип данных, находящихся в теле запроса, используемые наборы 
символов и другие сведения. Поскольку мы не впервые посещаем узел Соое, 
в составе запроса передается также запись соокіе — короткое сообщение с ин- 
формацией о клиенте. 

Заголовок ответа выглядит подобно приведенному ниже. 

НТТР/1.х 302 Роипа 

Госайоп: һїр://муу.воове.со.иКк/схѓег?с=РВЕЕ%30р: 

ТМ9%301116601572:5%302хРѕВрхһ72кпУМЕ&реу=/ 
Ѕеі-Соокіе: РКЕЕ=10=саЬаз8877ас0ьба:СК=1:ТМ=1116601572: 
М=1116943140:5=#р-049хр90Е18; 

ехрігеѕ=Ѕип, 17-Јап-2038 19:14:07 СМГ 

раіһ=/; доташ=.гоое.сот 

Сопѓепі-Туре: ѓехі/ Һет 

Ѕегуег: СМ/21 

Тгапѕѓег-Епсоаіпе: сһипкеа 

Сопіепі- Епсойіпо: 57р 

Оае: Тое, 24 Мау 2005 17:59:00 СМГ 

Сасћһе-Сопіго!: ргіуаќе, х-вир-ок="" 


Первая строка сообщает статус ответа. Код 302 означает перенаправление 
на другую страницу. В составе ответа мы получаем запись соокКіе для текуще- 
го сеанса, а также тип содержимого запроса (МІМЕ-тип). Следующий запрос 
формируется потому, что в ответе содержится код перенаправления. На него 
будет получен ответ со следующим заголовком: 


НТТР/1.х 200 ОК 
Сасве-СопЕго!: ргіуаќе 
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Сопіепі- Туре: ќехі/һіті 
Сопіепі-Епсойіпе: вхір 

Ѕегуег: СМ№8/2.1 

Сопќепї- Шепвіћ: 1196 

Раге: Тие, 24 Мау 2005 17:59:00 СМГ 


Код состояния 200 означает успешную обработку, а в тело ответа включа- 
ется код исходной страницы Соое, предназначенной для отображения в окне 
браузера. Поле заголовка сопіепі-іуре сообщает браузеру о том, что данные 
представлены в формате НТМГ. 

В рассмотренной выше функции ѕепіКедиеѕі второй и третий парамет- 
ры в большинстве случаев можно не указывать. По умолчанию для полу- 
чения ресурса используется метод РОЗТ, причем параметры в теле запро- 
са отсутствуют. 

После передачи запроса функция сразу возвращает управление, не дожи- 
даясь, пока запрос будет доставлен по сети серверу, а тот передаст ответ. Это 
хорошо с точки зрения интерактивного взаимодействия с пользователем, но 
как мы узнаем, что запрос уже обработан? 


2.5.4. Использование фуниции обратного вызова 
для контроля запроса 


Вторая часть решения задачи асинхронного взаимодействия — формирова- 
ние в составе кода точки повторного входа, которая нужна для получения 
результатов обработки запроса. Обычно для этой цели используется функ- 
ция обратного вызова — фрагмент кода, получающий управление тогда, ко- 
гда результаты уже готовы. Так, функцией обратного вызова является уже 
знакомая нам утдо\.оп]оа4. 

Функции обратного вызова применяются в программах, управляемых со- 
бытиями (именно по такому принципу и созданы пользовательские интерфей- 
сы большинства приложений). Пользователь может нажать клавишу, щелк- 
нуть мышью и выполнить другие действия в произвольный момент времени. 
Программист обеспечивает реакцию программы на эти действия путем напи- 
сания соответствующих функций обратного вызова. Создавая ЈауаЅсгірі-код 
обработки событий, мы используем опКеургеѕѕ, оптопзеоуег и другие по- 
добные свойства объекта. При написании кода функции обратного вызова 
мы применяем свойства опіоаа и опгеаду{аж{еспапее. 

Функцию обратного вызова опгеайуѕіаїіесһапве поддерживают браузе- 
ры Пиегше ЕхрІогег и МохШа, поэтому мы будем использовать именно ее. 
(Браузер Мо7Ша также поддерживает функцию опоай, которая более проста 


в использовании.) Несложный код обработчика, действующего по принципу 
обратного вызова, показан в листинге 2.10. 


Листинг 2.10. Обработчик, работающий по принципу обратного вызова 






























































уаг КЕА”үҮ ЅТАТЕ ОМІМІТІА 1І7Ер=0; 
уаг КЕАРүҮ ТАТЕ ТОАрІМС=1; 

уаг КЕАрүҮ ЅТАТЕ ІОАрЕр=2; 

уаг КЕАрүҮ ЅТАТЕ ІМТЕКАСТІҮЕ=3; 
уар КЕАРү ТАТЕ _СОМРІЕТЕ=4; 


92 Часть. Новый взгляд на Меб-приложение 


уаг үед; 

Ғопсёіоп ѕепавеацеѕі (игі ,ракатѕ, НесрмМеєћоа) { 
1Е (!нНЕебсрМеёћоа) { 

НеєрМеёһоа= "СЕТ"; 
} 
геа=сеёХміНТТРКеаиеѕі (); 
1Е (хед) { 
геа. опгеадуѕёаёесһапде=опКеайубіаёеСћһапде; 

геа. ореп (Неєрмеєһоа, огі,ёгие) ; 

геа. ѕзеїКеацеѕёНеайег 
("СопбепЕ-Туре", "арр1ісаёбіоп/х-үут- Ёогт-иг1епсодеа") ; 
геа. ѕепа (рагатѕ) ; 
} 

} 

Ғопсііоп опВеаЯу5сасеСтапасе () { 

уаг геаду=геа.геайубіаіе; 

уаг ааёа=пи11; 
1Е (үуеаду==ВЕАрү ТАТЕ СОМРІЕТЕ) { 
даса=геа.геѕропѕетТехі; 


























}е1ѕе{ 

даёса="1оааіпод... ["+кеайу+"]"; 

} 

ІІ... выполнение действий с данными 


Здесь мы изменили код функции ѕепіКедиеѕї (), а именно сообщили объ- 
екту запроса о наличии обработчика. Кроме того, мы определили функцию 
обработчика. Чтобы не тратить время на придумывание имени, мы назвали 
ее опКеаду(ажеСВапее(). 

Свойство геайуЅїаѓе получает числовые значения. Чтобы упростить вос- 
приятие программы, мы определили для каждого из этих значений символь- 
ное имя. В данный момент нас интересует только значение 4, соответствую- 
щее завершению обработки запроса. 

Заметьте, что объект запроса объявлен как глобальная переменная. Сей- 
час это упрощает работу с объектом ХМІ.НірКедџеѕі, но впоследствии, когда 
нам надо будет передавать несколько запросов одновременно, такое решение 
может стать источником проблем. Выход из этой ситуации мы покажем в раз- 
деле 3.1. А сейчас пришло время собрать воедино все фрагменты программы 
поддержки запроса к серверу. 


2.5.5. Жизненный цикл процедуры поддержки запроса 


Теперь мы имеем достаточно информации для того, чтобы полностью опи- 
сать жизненный цикл процедуры загрузки документа. Полный код НТМТ- 
страницы, содержащей Јауа$сгірі-программу, приведен в листинге 2.11. Мы 
создаем экземпляр объекта ХМЕНИрКедие$, сообщаем ему о том, что необхо- 
димо загрузить документ, а затем управляем процессом загрузки, используя 
функцию обратного вызова. В данном простом примере определяется узел 
РОМ с идентификатором сопѕоІе, в который помещается информация о со- 
стоянии запроса. 
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Листинг 2.11. Загрузка документа с использованием объекта ХМЕНТТРВеаџеѕї 
<ћітмі> 

<Һеаа> 

<ѕсгірі іуре= 'їехі/јауаѕсгірі'> 

уаг гед=пи11; 

уар сопѕо1е=пи11; 


























уаг КЕАрүҮ ЅТАТЕ ОМІМІТІАІІ7Ер=0; 
уаг КЕАрү _ЗТАТЕ_ТОАРТМС=1 ; 
уаг КЕАрҮ ТАТЕ 1І0АрЕр=2; 














уаг ВЕАПРУ_СТАТЕ_ТМТЕВАСТТУЕ=З; 
уар ВЕАрҮ ТАТЕ СОМРІЕТЕ=4; 
Ғопсёіоп ѕепавбеацеѕі (иг1,ракатѕ, НесрмМеєћоа) { 
1Е (!нНЕебрМеёћоа) { 
НеєрМеёһоа= "СЕТ"; 
} 
геа=іпіЄХМІНТТРВедчеѕё (); 
1Е (теа){ 
теа.опгеадузсаеесвапаче=опВеаЯу$ асе; 
геа.ореп (НЕЕрМеепоа, ог1,ёгиое); 
геа. зе -ВеааезЕНеааег 
("Сопёсепё-Туре", "арр11саб1оп/х-и"мм-Еоги-ик1епсоаеа"); 
геа. ѕепа (рагамз); 
} 
} 
Ғопсёіоп 101ЕХМЬНТТРВесдезеь () { 
уаг хВеааезе=по11; 
// Инициализация объекта запроса 
1Е (иіпаоу. ХМІНЕЕрКеацоеѕі) { 
хВеаиезЕ=пем ХМІНЕєрКеапцеѕё (); 
} е1зе 1Е (иіпаох.Асііуехорјесі) { 
хВеаиезЕ=пем АсііуеХоОрјесё 
("МаскозоЕЕ.ХМЬНТТР"); 
} 
тебсогп хКесиеѕі; 
} 
// Определение обработчика обратного вызова 
Ғопсёіоп опВеадубіаќбе () { 
уаг геаду=геа.геадйубёаіе; 
уаг ааёа=по11; 
// Проверка геадубіёаїе 
1 Е (үеайу==ВЕАрү ТАТЕ СОМРІЕТЕ) { 
// Чтение данных ответа 
дӢаса=геа. геѕропѕеТехё; 
}е1зе{ 
даса="1оааіпд... ["+кеаау+"]"; 
} 
соСопѕо1е (ааѓа); 
} 
Ғопсіёїіоп ёоСопѕо1е (Чака) { 
1Е (сопѕо1е!=пи11) { 
уаг пем11пе=Чосимепе . сгеасеЕ1епмепі ("а1у"); 
сопѕо1е.аррепасһі1а (пеи1іпе) ; 
уаг ЕхЕ=аосимепе .стеакеТехЕМоае (ааба) 
пеи1іпе.аррепасһі1а(ёхі) ; 
} 






























































Й 
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міпаоу. оп1оаа=Ёопсёіоп () { 
сопѕо1е=доситепіё . деёеЕ1 емепЕВутІа ( 'сопзо1е‘) 
ѕепакеаиеѕі ( "Чака. ёхі"); 

} 

</ѕсгірЄ> 

</Һеаа> 

<роау> 

<аӢіу 1іа= 'сопѕо1е'Х/аіу> 

</роау> 

</ВЕш1> 








Рассмотрим выходные данные программы, полученные с помощью МЕ 
сгозой Пиегпе ЕхрІогег и Мо Ша Еігеѓох. Заметьте, что последовательности 
состояний геайуЅіѓаїе отличаются, но конечные результаты совпадают. Важ- 
но помнить, что промежуточные состояния геайуЅіаїе различаются в раз- 
ных браузерах (и даже в различных версиях одного и того же браузера). 
Ниже показаны выходные данные, полученные с помощью Місгоѕоћ Пиег- 
пеї Ехр]огег. 

1оа41т2...[1] 

Іоааіпе...[1] 

Іоааіпе... [3] 

Неге іѕ ѕоте ќехі бот {ће ѕегуег! 


Каждая строка соответствует активизации функции обратного вызова. 
В процессе загрузки документа она вызывается дважды для различных фраг- 
ментов данных, затем еще раз в состоянии ВЕАРүҮ ЅТАТЕ ІМТЕКАСТІХЕ (В слу- 
чае синхронного запроса на этом этапе управление можно вернуть пользова- 
тельскому интерфейсу). Последний вызов соответствует завершению загруз- 
ки; текст ответа сервера можно отображать в окне браузера. 

Теперь рассмотрим данные, полученные посредством МохШа БЕігеѓох 1.0. 

Іоааіпе...[1] 

Іоааіпе... [1] 

Іоааіпе...[2] 

Іоааіпе...[3] 

Неге 15 ѕоте їехі бот {һе зегуег! 

Последовательность вызовов похожа на предыдущую, но имеет место до- 
полнительный вызов, при котором значение геайу$їаїѓе равно 2. 

В данном примере мы получаем ответ в текстовом виде, используя для 
этой цели свойство агеѕропѕеТехі объекта ХМЕНИрКеаие$. Такой подход 
хорошо подходит для простых данных, но если сервер должен возвратить 
большой объем структурированной информации, лучше использовать свой- 
ство гезропзеХМГ.. Если ответ соответствует МІМЕ-типу ѓехі/хті, будет по- 
лучена структура РОМ, которую можно опрашивать посредством свойств 
и функций, таких как ге етеп(Ву!А и св|аМо4е$, которые упоминались 
в разделе 2.4.1. 

Мы рассмотрели основные "строительные блоки" Ајах, каждый из кото- 
рых предоставляет полезные возможности, но реально мощность Ајах про- 
является лишь при их объединении в единое целое. 
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2.6. Отличия Ајах от классических технологий 


Несмотря на то что С5$$, РОМ, асинхронные запросы и ЈауаЅсгірі являют- 
ся неотъемлемыми компонентами Адах, эти технологии можно использовать 
независимо. 

В главе | мы уже обсуждали различия между классическими МеЫ- 
приложениями и приложениями, выполняющими те же функции, но создан- 
ными средствами Ајах. Сейчас необходимо снова затронуть эту тему. В клас- 
сических Меб-приложениях возможности, предоставляемые пользователю, 
определяются кодом, расположенным на стороне сервера. При переходе от 
одного документа к другому происходит загрузка целой страницы. Во вре- 
мя загрузки очередной страницы пользователь не может продолжать работу. 
В приложениях Адах последовательность действий пользователя по крайней 
мере частично определяется программой, выполняющейся на стороне клиен- 
та. Взаимодействие клиента с сервером происходит в фоновом режиме, неза- 
метно для пользователя. 


Однако, помимо этих крайних случаев, существует множество промежу- 
точных вариантов. \е5-приложение может предоставлять ряд отдельных 
страниц в рамках классического подхода, причем на каждой из этих стра- 
ниц допустимо использование С5$, РОМ, ЈауаЅсгірі и асинхронных запро- 
сов. ЈауаЅсгірі-приложение может отображать окна, похожие на классические 
\еБ-страницы. Браузер реализует гибкую среду, допускающую использова- 
ние в рамках одного приложение классического подхода и средств Ајах. 

Ајах отличается от других подходов к созданию УеБ-приложений не ис- 
пользуемыми технологиями, а моделью взаимодействия, которая становится 
возможной благодаря применению этих технологий. Модель взаимодействия 
У\еЬ плохо подходит для создания независимых приложений, и как только 
появилась возможность обойти ограничения этой модели, появились и новые 
перспективы в разработке интерфейсов. 

Очевидны два уровня, на которых целесообразно применять Ајах и ряд 
ситуаций, в которых есть смысл обращаться к классическому подходу, осно- 
ванному на использовании \!-страниц. Проще всего создавать на базе Ајах 
отдельные компоненты и включать их в состав У\еб-страницы посредством 
фрагментов сценариев. В качестве примеров подобных компонентов можно 
привести обновляемые данные о котировках акций, интерактивный кален- 
дарь, окно для обмена сообщениями в реальном времени. Таким образом, 
на классических Међ-страницах могут располагаться "островки", реализую- 
щие поведение, подобное интерфейсу обычных приложений для настольных 
систем (рис. 2.6). Большинство попыток обратиться к Адах при разработке 
средств Сооз]е вполне укладываются в эту модель. Заполнение поля в Сооз]е 
Ѕирреѕі и карта в Соовіе Марѕ — хорошие примеры интерактивных элементов 
в составе статического документа. 
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Ајах-приложение 


Модель |Ыаһ ав Баһ Ыаһ 





Рис. 2.6. Простое Ајах-приложение, которое представляет собой 
\Меб-страницу с "островками", реализующими интерактивные функции 


Дальнейшим продвижением применения Ајах может стать создание си- 
стемы, в которой фрагменты, ориентированные на приложение и документ, 
присутствуют на равных правах (рис. 2.7). Продукт, полученный в результате 
следования такому подходу, можно сравнить с приложением для настольной 
системы или даже с диспетчером окон. Этой модели соответствует Соое 
ОМац, где отдельные сообщения воспроизводятся как документы в составе 
интерактивной структуры. 

Изучение новых технологий — приятное занятие. Несмотря на то что со- 
ставные части Ајах уже известны разработчикам, интересно попробовать, 
как они будут работать совместно. Мы привыкли считать У\е5-приложение 
чем-то вроде повествования, в ходе которого мы ведем пользователя от одной 
странице к другой по предопределенному сценарию. Следуя новому подхо- 
ду, мы предоставляем пользователю возможность лучше контролировать те 
вопросы, для решения которых и создавалось приложение. 

Чтобы получить выгоду от дополнительной степени гибкости, кото- 
рую обеспечивает новый инструмент, мы должны пересмотреть многие из 
стереотипов мышления, сложившихся за многие годы. Действительно ли 
НТМЕ — единственное средство для ввода информации пользователем? 
Следует ли реализовывать все части пользовательского интерфейса в виде 
НТМГ-документов? Можно ли обращаться к серверу в ответ на такие дей- 
ствия пользователя, как нажатие клавиши и перемещение мыши, или надо 
по-прежнему щелкать мышью? Мир информационных технологий изменяет- 
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Рис. 2.7. Более сложное Ајах-приложение, представляющее собой 
интерактивную систему, в которой присутствуют элементы содержимого, 
ориентированного на документ. Эти элементы могут быть загружены или 
определены из программы 


ся очень быстро, и все мы придаем большое значение приобретению новых 
навыков. Однако избавление от старых привычек не менее важно. 


2.7. Резюме 


В данной главе мы рассмотрели четыре составные части Ајах. 

Јауа$сгірі — это мощный язык программирования общего назначения, 
незаслуженно получивший плохую репутацию инструмента, пригодного лишь 
для формирования окон с сообщениями, блокировки кнопок и загрузки изоб- 
ражений. В приложении Б содержится более подробное описание некоторых 
возможностей этого языка, но из примеров, приведенных в данной главе, 
можно получить представление о том, как можно использовать Јауа$сгірі 
для повышения практичности приложений. 

С$5 и РОМ дополняют друг друга при формировании пользовательско- 
го интерфейса, причем позволяют разделять структуру и визуальное пред- 
ставление. Строгая структура документа упрощает работу программы с ним, 
а разделение функций важно для создания больших Ајах-приложений (этот 
вопрос будет подробнее рассмотрен в главах 3 и 4). 

Вы узнали, как работать с объектом ХМЕНИрКеаие$ и более старыми 
средствами: ХиРоситепе и ІЕгате. В настоящее время можно услышать мно- 
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го хвалебных отзывов об объекте ХМІ.НірКедиеѕі, позволяющем организо- 
вать взаимодействие с сервером. Однако І Егате также предоставляет подоб- 
ные возможности, и в некоторых случаях удобно воспользоваться именно 
этим элементом. Зная, как работать с ними обоими, вы несомненно повыси- 
те свою квалификацию УеБ-разработчика. В главе 5 мы подробно обсудим 
взаимодействие клиента и сервера. 

И наконец, мы рассмотрели объединение основных составляющих Ајах, 
в результате которого удалось получить нечто большее, чем сумму состав- 
ных частей. Ајах подходит не только для решения частных задач, например, 
реализации компонентов, включаемых на У№еб-страницу, которая при отсут- 
ствии их была бы статической. Данный подход можно смело применять как 
основу для создания интерактивного пользовательского интерфейса, в кото- 
ром содержались бы лишь отдельные "островки" статических данных. Для 
того чтобы средства Ајах перешли с второстепенных на основные роли, надо 
создать большой объем ЈауаЅсгірі-кода, который мог бы надежно работать 
в течение длительного периода времени. Чтобы успешно решить такую зада- 
чу, надо изменить привычный подход к созданию кода и применять приемы, 
обеспечивающие надежность, гибкость кода и пригодность его к сопровож- 
дению. В следующей главе мы рассмотрим способы упорядочения кода боль- 
шого Ајах-приложения. 


2.8. Ресурсы 


Для тех, кто стремится глубже изучить каскадные таблицы стилей, мы реко- 
мендуем узел С55 еп Саг4еп (ВИр://\\\.сз57тепгаг4еп.сот/), стили кото- 
рого могут изменяться множеством способов, причем для получения резуль- 
тата не используются никакие другие средства, кроме С5$5. 

Эрик Мейер (Егіс Меуег) интенсивно использует С$$. Посетите его У№Б- 
узел по адресу ВИр://м\у\у.теуегмеЬ.сот/ет1с/с$$/. ВіІообеггу (һіёр:// 
у\\.ЫооБеггу.сот) — еще один превосходный ресурс для тех, кому необ- 
ходима информация по С5$. 

С первыми решениями Ајах, использующими элементы ІЕгате, можно 
ознакомиться по адресу һћіїр://аеуе1Іорег.аррі1е.сот/іпіегпеї/мерсопѓепі 
Літате.һіті. 

Расширение Мо2Ша ШіуеНірНеайегѕ можно найти по адресу һіїр:// 
Пуеһіірһеайегѕ.то7еу.оге/. 

В книгах Денни Гудмена (Юаппу Соодтап) Рупатіс НТМІ: Тле Реўпі- 
йуе Кејегепсе (О'КешШу, 2002) и Јауа$сгірі Ве (Јоһп УШеу, 2004) содержится 
обширный материал по работе с РОМ. Кроме того, в них подробно описыва- 
ется среда браузера. 

На У\еБ-узле \№ЗЅсһоо!1ѕ (һр: //ууүү.ууЗѕсһоо1ѕ.сот/јѕ/јѕ5 ехатрі1еѕ 3. 
азр) представлены интерактивные руководства по ЈауаЅсгірі. 







Управление ко 


В этой главе... 


• Разработка и сопровождение сложных клиентов Ајах 
• Реструктуризация ЈауаЅсгірі-кода Ајах-приложения 


• Использование образов разработки 
при создании Ајах-приложений 

• Использование архитектуры "модель-представление- 
контроллер" при создании серверных программ 
в составе Ајах-приложений 


• Общие сведения о библиотеках Ајах 
независимых производителей 
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В главе 2 мы обсудили основные технологии, составляющие инфраструк- 
туру Ајах. Оказывается, что, пользуясь лишь давно известными нам сред- 
ствами, можно написать превосходное Ајах-приложение, о котором мы дав- 
но мечтали. К сожалению, можно создать себе и массу проблем и получить 
в результате длительной работы запутанный клубок кода, НТМГ-элементов 
и стилей, непригодных для сопровождения. Не исключено, что однажды по 
непонятным причинам результат вашего труда вдруг окажется полностью 
неработоспособным. А может быть еще хуже. Приложение будет работать, 
пока вы стоите рядом, затаив дыхание. Если подобная ситуация возникнет 
с программой, написанной для себя лично, — это неприятно. А если таким ре- 
зультатом завершилась работа по заданию руководства и к тому же возникла 
необходимость изменить некоторые детали — это просто ужасно! 


К счастью, подобные проблемы возникали уже на заре компьютерной эры 
и даже до ее начала. Разработчики нашли способ справляться со сложными 
проектами и держать в порядке коды большого объема. В этой главе мы 
рассмотрим базовые инструменты для работы с кодом, которые помогут вам 
создать Ајах-приложение, изменить его по требованию заказчика и при этом 
не задерживаться на работе после окончания рабочего дня. 

Ајах отличается от ОНТМІ. не только способом применения уже извест- 
ных технологий, но и масштабом их использования. В Ајах-приложении со- 
держится гораздо больший объем ЈауаЅсгірі-кода, чем в классическом при- 
ложении. Кроме того, код присутствует в браузере в течение гораздо более 
длительного времени. Следовательно, возникает задача управления сложно- 
стью, которая не стояла перед специалистами, использовавшими ОНТМГ. 

В этой главе мы рассмотрим инструменты и приемы, позволяющие наво- 
дить порядок в коде программы. Важность этих средств зависит от сложно- 
сти Ајах-приложения, которое вы создаете. Если вы собираетесь ограничить- 
ся созданием лишь простых продуктов, мы советуем вам пропустить матери- 
ал книги вплоть до главы 9, в которой мы начнем рассмотрение программ, 
управляемых примерами. Если вы уже знакомы с принципами реструкту- 
ризации и образами разработки, перейдите к главам 4-6, в которых будет 
рассматриваться применение этих средств. В любом случае базовые поня- 
тия, рассматриваемые здесь, важны для управления ЈауаЅсгірі-кодом, и мы 
надеемся, что рано или поздно вы вернетесь к данной главе. В конце главы 
приведен обзор библиотек независимых производителей, ориентированных на 


Ајах, поэтому если вы ищете набор инструментов для своего проекта, обра- 
титесь к разделу 3.5. 


3.1. Порядок из хаоса 


Основной прием, который мы будем применять для упорядочения кода при- 
ложения, — это реструктуризация (теЃасіогіпе), т.е. процесс изменения ко- 
да, при котором выполняемые им функции не изменяются, но сам код ста- 
новится более понятным. Наведение порядка имеет смысл уже само по се- 
бе, но, кроме того, выполнить подобную работу необходимо из соображе- 
ний целесообразности. 
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Если код имеет ясную и понятную структуру, гораздо проще реализовы- 
кать новые функции, а также модифицировать и удалять уже существующие. 
Если код выполнен неаккуратно, он, может быть, и соответствует текущим 
требованиям, но никто из команды разработчиков не представляет, почему 
же он все-таки работает. 

Практически каждому разработчику приходится реагировать на изменя- 
ющиеся условия. Как правило, приводить программу в соответствие новым 
требованиям приходится в сжатые сроки. В процессе реструктуризации код 
упорядочивается и становится пригодным к сопровождению. Реструктуризи- 
ровав код, вы можете без страха изучать новые требования и выполнять их. 

Элементарные действия по реструктуризации уже описывались в главе 2, 
когда речь шла о размещении ЈауаЅсгірі, НТМГ-кода и таблиц стилей в от- 
дельных файлах. Однако Лауазспир!-код считается длинным, если он превы- 
шает 120 строк и объединяет в себе низкоуровневые функции (например, 
поддержку запроса серверу) с фрагментами кода, управляющими объектами 
документа. При работе над большим проектом иметь один Јауа$Ѕсгірі-файл 
(равно как и один файл со стилями) крайне неудобно. Гораздо лучше со- 
здавать небольшие фрагменты кода, удобные для чтения и модификации, 
каждый из которых выполняет конкретную задачу. Такой подход принято 
называть распределением функций, или распределением ответственности 
(зераганоп оЁ гезроп$ © Ш@е$). 


Реструктуризация преследует и другую цель — идентификацию общих 
решений и приведение кода в соответствие конкретному образу разработки. 
Этот вопрос желательно обсудить подробнее. 


3.1.1. Образы разработки 


Если код соответствует некоторому хорошо зарекомендовавшему себя шаб- 
лону, есть все основания предполагать, что он будет удовлетворительно ра- 
ботать, хотя бы потому, что подобная задача уже была решена ранее. Раз- 
работчики обдумали все основные вопросы и решили большинство проблем. 
Если повезет, может оказаться, что существуют даже базовые программные 
средства, пригодные для повторного использования. 

Такие шаблоны, отражающие опыт предшественников, принято называть 
образами разработки. Это понятие было введено в 1970-х годах в архитекту- 
ре, а в последние годы его начали применять и разработчики программного 
обеспечения. Образы разработки широко применяются при создании Јауа- 
программ, предназначенных для выполнения на сервере, а корпорация Мі- 
сгозой активно внедряет его в .МЕТ Егате\мо!К. Данный термин звучит вну- 
шительно, напоминает нечто, относящееся к "чистой науке", и бывает, что 
кто-то, не потрудившись разобраться в данном вопросе, применяет его лишь 
для того, чтобы произвести впечатление на собеседников. Многие неправиль- 
но истолковывают это понятие. На самом деле образ разработки — это описа- 
ние способа решения задачи, связанной с разработкой программы. Благодаря 
применению образов разработки ряд абстрактных решений получили имена, 
а это упрощает их обсуждение и понимание. 
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Образы разработки важны при реструктуризации, поскольку позволяют 
кратко описать основную цель этого процесса. Инструкция типа "оформить 
этот фрагмент кода в виде объектов, инкапсулирующих выполнения действия 
пользователем и позволяющих отменить это действие" слишком многослов- 
на, поэтому ее трудно удержать в голове, выполняя реструктуризацию кода. 
Если же вы скажете, что необходимо привести код в соответствие с образом 
разработки Соттапа, то задача будет поставлена гораздо точнее и обсуж- 
дать ее станет намного удобнее. 

Если вы давно занимаетесь разработкой серверных программ на Јауа, 
то, вероятно, скажете, что мы не сообщили вам ничего нового. Другие, воз- 
можно, подумают, что мы агитируем их применять нечто вроде блок-схем. 
В любом случае мы готовы услышать вопрос: какое отношение имеет выше- 
сказанное к Ајах? Ответ прост: большое! Давайте выясним, какие выгоды 
может получить от реструктуризации программист, использующий Ајах. 


3.1.2. Реструктуризация и А/ах 


Мы уже говорили о том, что Ајах-приложения, как правило, содержат 
большой объем ЈауаЅсгірі-кода, который длительное время сохраняется 
в браузере. 

В классическом УеБ-приложении сложный код находится на сервере и об- 
разы разработки применяются к серверным программам РНР, Јауа или .МЕТ. 
Используя Ајах, мы должны применить те же средства к клиентскому коду. 

Можно даже утверждать, что ЈауаЅсгірі-код больше нуждается в ре- 
структуризации, чем программы, написанные на Јауа и С#. Несмотря на 
синтаксис, Јауа$Ѕсгірї больше напоминает такие языки, как Киђу, Рупоп и да- 
же Соттоп Ір, чем Јауа или С#. Он обеспечивает необычайную гибкость 
и богатые выразительные средства. Квалифицированный разработчик несо- 
мненно воплотит эти возможности в программу высокого качества, однако 
средний программист может не справиться с ними, в результате пострадает 
надежность программы. Языки, ориентированные на создание корпоратив- 
ных приложений, такие как Јауаи С#, напротив, ориентированы на команду 
специалистов средней квалификации, состав которой может изменяться. 


Опасность создать посредством ЈауаЅсгірі запутанный и сложный для 
восприятия код достаточно высока, и если этот код ориентирован не на од- 
ну У\еБ-страницу, а на целое приложение, необходимо принимать меры для 
исключения такой возможности либо для уменьшения ее вероятности. Поэто- 
му мы настаиваем на реструктуризации Ајах-программ и считаем, что она 
должна производиться более тщательно, чем это делается при работе с таки- 
ми относительно "безопасными" языками, как Лауа и С#. 


3.1.3. Во всем надо знать меру 


Приступая к реструктуризации, необходимо помнить, что она, как и обра- 
зы разработки, является средством, а не целью. Выполнять ее надо лишь 
До тех пор, пока это оправдано. Если вовремя не остановиться, произойдет 
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"блокировка разработки из-за анализа" — ситуация, при которой реализа- 
ция приложения откладывается на неопределенное время из-за бесконечного 
поиска наилучшего решения. Разработчик пытается еще больше повысить 
гибкость системы, довести ее структуру до идеального состояния, чтобы бу- 
дущие изменения не вызывали никаких затруднений. Следует ли говорить, 
что до изменений дело может вовсе не дойти, так как под угрозу ставится 
существование самой программы. 

Подобную ситуацию описал Эрик Гамма (Егісһ батта), признанный спе- 
циалист по образам разработки, в недавнем интервью (ссылка на него при- 
ведена в конце главы). Подобно тому как разработчик включает в свою 
программу целочисленные переменные, строки и массивы лишь там, где 
они необходимы, применять образы разработки надо только тогда, когда 
они нужны. 

Э. Гамма считает, что наилучшим способом применения образов разра- 
ботки является реструктуризация. Следует написать код так, чтобы он лишь 
выполнял поставленную задачу, а затем, приводя его в соответствие с обра- 
зом разработки, можно решить типичные проблемы. Если у вас уже написан 
большой объем кода и вы собираетесь привести его в порядок или сделать то 
же самое с программой, написанной другим программистом, то в обычных 
условиях вам придется приложить все силы и все равно успех не будет га- 
рантирован. К счастью, применять шаблоны разработки можно к коду любой 
сложности и любого качества. В следующем разделе мы рассмотрим фраг- 
менты, приведенные в качестве примеров в главе 2, и выясним, как можно 
преобразовать их путем реструктуризации. 


3.1.4. Реструктуризация в действии 


На первый взгляд, преимущества реструктуризации кажутся очевидными, но 
программисты-практики, наверное, захотят увидеть их на конкретном приме- 
ре. Потратим немного времени, чтобы применить процедуру реструктуриза- 
ции к Ајах-коду, который был представлен в листинге 2.11. Как вы помните, 
мы определили функцию ѕепаКедиеѕі(), предназначенную для передачи за- 
просов серверу. Для извлечения объекта ХМ НИрКедие эта функция обра- 
щается к шиНИрКеачез1 (), а обработка ответа производится посредством 
функции обратного вызова опКеайуЅїѓаѓе (). Объект ХМЕНирКеаие$ был по- 
мещен в глобальную переменную, что позволило функции обратного вызова 
использовать его. Обработчик ответа, действующий по принципу обратного 
вызова, анализировал состояние объекта запроса и генерировал информацию, 
предназначенную для отладки. 


Код, представленный в листинге 2.11, выполняет необходимые действия, 
но повторно использовать его будет непросто. Обычно, -передавая запрос сер- 
веру, мы собираемся анализировать ответ и, в зависимости от его содержа- 
ния, выполнять действия, необходимые для решения текущей задачи. Для 
того чтобы включить в имеющийся код бизнес-логику, нам пришлось бы мо- 
дифицировать функцию опКеайуЅіаѓе (). 
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Наличие глобальной переменной также может привести к возникнове- 
нию проблем. Если надо будет одновременно передать несколько запросов 
серверу, нам придется указывать для каждого из них отдельный обработчик. 
Кроме того, получив набор ресурсов, необходимо будет следить, какие из них 
должны отображаться взамен существующих, а какие не надо учитывать. 

В объектно-ориентированном программировании стандартным решением 
задач подобного рода является инкапсуляция требуемых функциональных 
возможностей в составе объекта. Объектные средства ЈауаЅсгірі позволяют 
нам сделать это. Мы назовем наш объект Сошеп оа4ег, поскольку он за- 
гружает данные с сервера. Каким должен быть этот объект? Наверное, он 
должен создаваться на основе ОКІ. ресурса, которому передается запрос. Нам 
также надо указать ссылку на произвольный обработчик обратного вызова, 
который будет выполнен при успешной загрузке документа. Необходима еще 
одна ссылка на обработчик, который получит управление при наличии ошиб- 
ки. Обращение к объекту может выглядеть следующим образом: 


уаг Іоайег=пеу пеї. Сопѓепі оа4ег(‘тудаа.хш!, рагѕеМураќѓа); 


где рагѕеМураѓа — функция обратного вызова, соответствующая успешной 
загрузке документа. Код объекта Сощеп оа4ег показан в листинге 3.1. 
В нем были применены новые решения, которые мы обсудим ниже. 


Листинг 3.1. Объект Сощеп оааег 


//1 Объект пространства имен 
уаг пе=пем Објесї(); 




















пеё.КЕАРрҮ ТАТЕ ОМІМІТІАІ7Ер=0; 
пес .КЕАрү _СТАТЕ_ГОАРТМС=1 ; 

пес .КЕАРрүҮ ТАТЕ ТОАрЕр=2; 
пеё.КЕАрүҮ ЅТАТЕ ІМТЕКАСТІҮЕ=3; 
пес .КЕАРрҮ ТАТЕ СОМРІЕТЕ=4; 
































// 2 Конструктор 

рее. СопбепЕГоадех=РЕапсЕ1 оп (иг1,оп1оаа, опеггог) { 
ећіѕ.џг1=0гі; 

ЕҺ1ѕ.геда=пи11; 

ЕҺіѕ.оп1оад=оп1оаа; 

Е 

Е 








һіѕ.опеггог= (опегкох) ? опеггог : (01$.ЧеЕао1ЕЕггог; 
һіѕ.1оаахмІірос (игі) ; 











пе .СопіепіІоайег.ргоёоіуре= { 
// 3З Переименованная функция іпіЄХМІНЕёрКеацеѕіё 
1оаахмірос : Ёџпсіёіоп (игі) { 
// 4 Реструктуризированная функция 1Іоаахмі, 
1Е (иіпаоу. ХМІНЕбрВКеаичеѕі) { 
СҺіѕ.геа=пеут ХМІНЕЕрКедиеѕі () ; 
} е1зе іЕ (хіпаоу.Асёіуехорјесі) { 
515$ .геа=пем АсеіуехоОрјесі ("МісгоѕоЁі .ХМІНТТР"); 
} 
1Е (6615.геан 
Сху { 
уаг 1Іоайег=һізѕ; 
Еһіѕ. геа. опгеайуѕіаёесһапде=Ёџпсёіоп () { 
Іоадег.опВеайубёаіёе.са11 (1оайег) ; 
} 
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// 5 Реструктуризированная функция зепаВеаоезе 
(61$.геа.ореп ('СЕТ•, игі, Ехие); 

ЕҺі5ѕ. гед. вепа (по11); 

}саёсһ (егг) { 

Еһіѕ.опеггог.са11 (61$); 

} 

} 

Е 

// 6 Реструктуризированная функция обратного вызова 
опВеадуб асе : Ёцпсііоп () { 

уаг геа=+һіѕ.гед; 

уаг геаду=геда.геайубіабе; 

1Е (үеаду==пеі .ВКЕАрү ТАТЕ _СОМРІЕТЕ) { 

уаг һіёрбіаёиѕ=геда.зѕіаёиѕ; 




















1Е (Һесрбёӧаіиѕ==200 || һіірЅёаёиѕ==0) { 
ЕҺ15ѕ.оп1оаа.са11 (һіѕ); 
}е1ѕе{ 


ЕҺ15.опеггог.са11(ёһіѕ); 

} 

} 

}, 

ЧеЕац1ЕЕхгог : Ёопсёіоп () { 

а1егё ("еггог ЁҒеісһіпо ааба!" 
+"\а\пгеадубіаёе: "+Еһіѕ.геа. кеадубіаёе 
+"\пѕёаёиѕ: "+Еһіѕ. кед. ѕбаёиѕ 
+"\пһеайегѕ=: "+61$ . гед.деёАНВКеѕропѕеНеайегѕ ()) ; 
} 
} 








Первое новшество — это единственная глобальная переменная пеї 1, ко- 
торая содержит все необходимые ссылки. При этом вероятность конфликта 
имен уменьшается, а код, имеющий отношение к сетевым запросам, локали- 
зуется в одном месте. 

Для нашего объекта предусмотрен конструктор 2, которому передаются 
три параметра, но только два из них являются обязательными. При установ- 
ке обработчика ошибок мы проверяем, содержит ли параметр значение пи, 
и в случае положительного результата проверки предпринимаем действия по 
умолчанию. Возможность передавать функции переменное число параметров 
и передавать функцию при первом обращении к классу может показаться 
странной для специалистов, привыкших создавать программы в рамках объ- 
ектного подхода. Однако ЈауаЅсгірі допускает подобные решения. Свойства 
данного языка рассмотрены в приложении Б. 

Значительную часть кода функций ШИХМЕНИрКВеадае$() 4 и 
зепаКеачез{ () 5 мы поместили в состав объекта и переименовали из- 
мененный код. Новое имя призвано отражать более широкую область 
применения. Функция, объединяющая возможности іпііХМІ.НірКедиеѕі() 
и ѕепаКедиеѕі (), теперь называется Іоайахмі Оос 3. Для нахождения объекта 
ХМЕНирКВеаце и инициализации запроса мы используем те же подходы, что 
и ранее, но это никак не влияет на действия программиста, использующего 
Данный объект. Функция обратного вызова, опКеайуЅіаќе () 6, в основном 
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осталась такой же, как и в листинге 2.11. Мы лишь заменили обращения 
к консоли на вызовы функций оп|оа4 и опеггог. Эти действия также могут 
показаться несколько непривычными для многих разработчиков, поэтому мы 
рассмотрим их подробнее. Функции ошоа4 и опеггог представляют собой 
объекты Еопсіоп, а Еџпсііоп.са1() — это метод данного объекта. Первый 
параметр, Еопсііоп. сап (), представляет собой контекст функции, и в теле 
функции на него можно ссылаться с помощью ключевого слова 111$. 
Написать обработчик обратного вызова, передаваемый объекту Сощеш- 
Гоа4ег, очень легко. Если нам надо обратиться к любому свойству Сощет- 
Гоайег, например ХМГНИрКеаиея или игі, это можно также сделать с помо- 
шью ключевого слова 111$. Например: 
Рапсйоп шуСаПВасМ ) { 
а1егЕ ( 
161$. аг| 


+" Іоайеа! Неге'ѕ һе сопіепі:\ п\п" 
+1һ15.гед.геѕропѕеТехї 


);} 

Очевидно, что, для того, чтобы написать код объекта, подобного рас- 
смотренному выше, необходимо знать особенности языка Јауа$сгірі, но по- 
сле создания объекта его можно использовать, не задумываясь о внутрен- 
ней структуре. 

Данный пример демонстрирует преимущества реструктуризированной 
программы. Мы "спрятали" внутри объекта сложные фрагменты кода, пред- 
ставив потенциальному пользователю внешние элементы, при работе с кото- 
рыми не возникает трудностей. Фрагменты, разобраться с которыми может 
только квалифицированный специалист, теперь изолированы от остальной 
части программы. Если возникнет необходимость модификации кода, она бу- 
дет выполнена локально, и не придется анализировать всю программу в по- 
исках фрагментов, в которые надо вносить изменения. 


Мы рассмотрели лишь основные принципы реструктуризации и их ис- 
пользование на практике. В следующем разделе мы обсудим более сложные 
проблемы, возникающие при создании Ајах-программ, и выясним, как мож- 
но решить их, используя ту же реструктуризацию. Попутно мы опишем ряд 
полезных приемов, которые будем применять в следующих главах и которые 
смогут помочь вам при работе над собственными проектами. 


3.2. Варианты применения реструктуризации 


В следующих разделах будут рассмотрены вопросы, часто возникающие при 
разработке приложений Ајах, и предложены ответы на них. В каждом из 
этих случаев найти решение задачи помогает реструктуризация. В процес- 
се обсуждения вопросов мы выделим элементы, пригодные для повторного 
использования. 

В литературе, посвященной образам разработки, принято описывать про- 
блему, рассматривать ее решение, а затем обсуждать сопутствующие вопро- 
сы. Не будем отступать от этих традиций. 
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3.2.1- Несоответствие браузеров: образы разработки 
Радаае и Ааарїег 


Спросите любого разработчика М№еЬ-приложений, какие проблемы он считает 
главными, и каждый, будь он программистом, дизайнером, художником или 
специалистом другого профиля, ответит, что в первую очередь необходимо 
обеспечить корректное отображение данных различными браузерами. Боль- 
шинство вопросов функционирования У регулируется стандартами, и про- 
изводители браузеров в основном пытаются следовать им. Однако иногда 
стандарты допускают разночтение, что отражается в их реализации; в неко- 
торых случаях производители расширяют стандарты в удобном для себя на- 
правлении, кроме того, в браузерах, как и в любых сложных программах, 
всегда есть ошибки. 


Разработчикам ЈауаЅсгірі-программ очень часто приходится выяснять 


тип браузера, в котором отображается документ, и наличие того или ино- 
го объекта. Рассмотрим очень простой пример. 


Обработка элементов ВОМ 


Как было сказано в главе 2, \УеБ-страница представляется Јауа$сгірі- 
программе в виде древовидной структуры РОМ, элементы которой соот- 
ветствуют элементам НТМГ-документа. При обработке дерева РОМ из про- 
граммы часто возникает необходимость определять позицию элемента в окне 
браузера. К сожалению, производители браузеров уже давно предоставля- 
ют для этой цели нестандартные методы, затрудняя перенос кода из одной 
клиентской программы в другую. В листинге 3.2 показан упрощенный вари- 
ант одной из функций библиотеки Майка Фостера (подробнее о ней — ни- 
же, в разделе 3.5). Эта функция выполняет все необходимые действия для 
определения позиции левого края компонента страницы, соответствующей 
РОМ-элементу е, который передается в качестве параметра. 


Листинг 3.2. Функция се Шей (} 
Ғопсйоп вее (е)! 
1Е(! (е=хбеёЕ1етмепіВутІа (е) )) { 
геёогп 0; 
} 
уаг сѕѕ=хреї (е. ѕіу1е) ; 
1Е (еѕѕ && хӧЕг (е.ѕіу1е.1еЁі)) { 
іХ=рагѕе1пі (е.ѕіу1е.1еЁі); 
1Е(1$МаМ(1х)) 1х=0; 
}е1зе 1# (еѕѕ && хреғ (е.ѕіу1е.ріхе11еЁёі)) { 
іХ=е.зѕіу1е.ріхе11еЁі; 
} 
тебахги іх; 


} 














В различных браузерах предусмотрены разные способы определения по- 
зиции, соответствующей узлу РОМ. В стандарте С8552, разработанном МЗС, 
описано свойство ${у1е.1еЁ. Его значением является строка, содержащая 
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числовую величину и единицы измерения, например ЮОрх. Поддерживаются 
не только пиксели, но и другие единицы. Свойство 51У1е.р1хе1ШеЁ, напро- 
тив, допускает указание только числа; при этом предполагается, что значение 
задано в пикселях. Данное свойство поддерживается только М!сгозой Пщег- 
пе Ехр]огег. Метод вейеѓ { (), рассматриваемый здесь, определяет, поддер- 
живаются ли С55, а затем проверяет оба значения, начиная с того, которое 
предусмотрено стандартом МЗС. Если ни одно из значений не найдено, ме- 
тод возвращает нулевую величину, предусмотренную по умолчанию. Заметь- 
те, что здесь не определяется имя и версия браузера, а применяется более 
надежный способ обнаружения объектов, который рассматривался в главе 2. 

Написание подобных функций, учитывающих особенности каждого брау- 
зера, — рутинная и утомительная работа, но после ее окончания программист 
может продолжать написание приложения, не уделяя внимания конкретной 
проблеме. Существуют библиотеки, авторы которых уже выполнили необхо- 
димую работу. Готовые надежные функции для определения позиции эле- 
мента РОМ и решения других подобных задач могут существенно ускорить 
создание пользовательского интерфейса для Ајах-приложения. 


Обращение к серверу 


О проблеме несовместимости браузеров мы уже говорили в главе 2. Про- 
изводители клиентских \!е-программ предоставляют нестандартные сред- 
ства получения объекта ХМЕНИрВеачце$, используемого для организации 
асинхронного взаимодействия с сервером. Если мы хотим скопировать 
ХМГ-документ с сервера, необходимо решить, какое средство использовать 
для этого. 

Ілќегпеї Ехр]огег выполняет необходимые действия только в том случае, 
если мы обратимся к компоненту АсіуеХ, а в браузерах Мох Ша и Ѕаѓагі 
для этой цели используется встроенный объект. Об этих различиях "зна- 
ет" только фрагмент кода, отвечающий за загрузку ХМГ-документа. Как 
только программа получит объект ХМЕНИрКеаце$, она будет работать неза- 
висимо от того, какое именно решение реализовано в конкретном браузере. 
Код, обращающийся к объекту, не должен зависеть от того, используется 
ли АсіуеХ или подсистема браузера. Все, что ему надо, — это конструктор 
пе. Сощеп{Гоадег(). 


Образ разработки Ғасаде 


Как для ге1ГеЁ(), так и для пеу пе .Сощеп(Гоааег() код, предназначен- 
ный для обнаружения объектов, сложен, и создавать его утомительно. Опре- 
деляя функцию, скрывающую его, мы делаем остальную часть программы 
эолее простой для восприятия. В этом состоит базовый принцип реструкту- 
ризации — не повторяться (4оп”“ гереаї уоитзе! — ОКУ). Если окажется, 
что код, предназначенный для обнаружения объектов, работает некоррект- 
но, ошибку надо будет исправить в одном месте, а не искать, где в программе 
эпределяются координаты элемента РОМ или формируется запрос. 
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Вызывающий код 





Рис. 3.1. Условное представление образа разработки Гасаае, 
используемого для работы с объектом ХМІЕНіїрВедиеѕї на 
различных браузерах. Функция Іоаахмі () лишь использует 
объект ХМІНіїрВеаиеѕї и не "заботится" о его реализации. 
Сама реализация может быть очень сложной, но вызывающей 
функции предоставляются только базовые элементы 


Другими словами, поступив подобным образом, мы используем образ раз- 
работки Ғасайе, который предоставляет одну точку доступа к функциональ- 
ным средствам, реализованным различными способами. Например, объект 
ХМІНерКедиеѕі обеспечивает полезные возможности, а использующее его 
приложение не должно "заботиться" о том, как они реализованы (рис. 3.1). 

Во многих случаях бывает необходимо упростить доступ к подсистеме. 
Например, при получении координаты левого края элемента надо учитывать, 
что С55 позволяет задавать значения в пикселях, пунктах, дюймах и дру- 
гих единицах измерения. В нашем случае такое разнообразие представлений 
лишь затрудняет работу. Функция вееѓі (), приведенная в листинге 3.2, 
применима лишь до тех пор, пока в качестве единиц измерения используют- 
ся пиксели. Упрощение подсистемы — это еще один результат, достигаемый 
посредством образа разработки Еагаае. 


Образ разработки Адарег 


С образом разработки Ғарайе непосредственно связан образ Айарѓег. В этом 
случае мы также работаем с двумя подсистемами, выполняющими анало- 
гичные функции. В качестве примера можно привести варианты получения 
объекта ХМЕНирКедие$ в продуктах Місгоѕой и Мо7Ша. Вместо того чтобы 
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создавать новый образ Еаза4е для каждого из этих вариантов, мы реализуем 
над одной из подсистем дополнительный уровень, который предоставляет тот 
же АРІ, что и другая подсистема. Этот уровень, как и сам образ разработки, 
[называется Адар"ег. В библиотеке Ѕагіѕѕа, которую мы рассмотрим в разде- 
ле 3-5.1, образ Адар\ег применяется для преобразования компонента АсНуеХ 
„ браузере Пиегпе{ ЕхрІогег. В результате он становится похожим на объект 
хМЕНирКеаиез(, встроенный в браузере Мо2Ша. Оба подхода имеют право на 
существование и помогают интегрировать существующий код или продукты 
независимых разработчиков (включая сами браузеры) в проект Ајах. 
Теперь перейдем к рассмотрению следующего варианта применения об- 
разов разработки, связанного с моделью поддержки событий ЈауаЅсгірі. 


3.2.2. Управление обработчиками событий: образ 
разработки Обѕегуег 


Невозможно создать нетривиальное Ајах-приложение, не обеспечив работу 
с событиями. Пользовательский интерфейс ЈауаЅсгірі управляется события- 
ми, и асинхронные запросы, типичные для Ајах, требуют интенсивного ис- 
пользования функций обратного вызова и обработчиков событий. В простых 
приложениях конкретное событие, например щелчок мышью или получение 
данных с сервера, может быть обработано с помощью одной функции. По 
мере усложнения программы и увеличения ее размера необходимо выделять 
несколько подсистем и событий, причем в ряде случаев заинтересованные 
подсистемы могут оповещать сами себя о необходимости обработки. Рассмот- 
рим эти вопросы подробнее. 


Использование нескольких обработчиков событий 


Очень часто фрагмент ЈауаЅсгірі-кода определяют как функцию \Ш- 
оу, оп1оа, чтобы он получал управление тогда, когда документ полностью 
загружен (и, следовательно, древовидная структура РОМ сформирована). 
Предположим, что нам необходим элемент РОМ, который после загрузки 
страницы через определенные интервалы времени отображал бы данные, по- 
лученные с сервера. ЈауаЅсгірі-код, координирующий загрузку информации 
и ее отображение, должен иметь ссылку на узел РОМ. Получить ее можно 
в обработчике ушао\м.ошоа4. 


міпадоу.оп1іоаа=Ёџпсёіоп () { 
а15ѕр1ауріу=аоситепі .чесЕ1етепеВУуТаА ('91$р1ау'); 

) 

Пока все хорошо. Предположим теперь, что нам также необходимо отоб- 
ражать новости (соответствующая программная реализация будет рассмот- 
рена в главе 13). Код, контролирующий отображение новостей, также должен 
получить ссылки на некоторые элементы РОМ. Для этого надо определить 
обработчик жіпіож.опІоаа. 





міпаох.оп1оаа= Ёџпсіёіоп () { 
Ғееаріу=аӢоситепё .десЕ1егаепіВута (' Ғееаѕ') ; 
} 
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Проверим оба фрагмента кода на отдельных страницах и убедимся, что 
они работают корректно. Однако при их объединении вторая функция \ш- 
Чо\у, ооа переопределяет первую, в результате чего возникают ошибки. 
Проблема в том, что с объектом окна можно связать только одну функ- 
цию опіоаа. 


Ограничения объединенного обработчика событий 
Второй обработчик событий замещает первый. Этого можно избежать, реа- 
лизовав все действия по обработке в одной функции. 


міпаои.оп1оаа=Ғцџпсёіоп() { 
а1ѕр1ауріу=аоситепі .деёЕЕ1етепєВуІа ('915р1ау'); 








Ғееаріу=аоситмепі .чесЕ1етмепЕВутТа (' Ёееаѕ') ; 

} 

Такой подход допустим в нашем конкретном примере, но он приводит 
к усложнению кода; теперь процессы отображения данных и просмотра но- 
востей становятся зависимыми друг от друга. Если же мы будем иметь дело 
не с двумя системами, а с десятью или даже с двадцатью, и каждому потре- 
буется ссылка на несколько элементов РОМ, то объединенный обработчик 
станет неуправляемым. Добавление и удаление отдельных компонентов бу- 
дет сопровождаться появлением ошибок, т.е. возникнет та ситуация, о кото- 
рой мы говорили в начале главы: все будут бояться внести хотя бы минималь- 
ные изменения в состав кода, чтобы не разрушить его окончательно. Давайте 
прибегнем к реструктуризации и определим отдельную функцию для каждой 
подсистемы. 

міпаож.опоаа=ѓипсііоп()! 


веї0іѕрІауЕ1етепіѕ(); 
веїЕееаЕетепіѕ(); 


} 
Ғопсіоп веїріѕрІауЕетепіѕ(){ 


аіѕрІауЮіу=ӣоситепі.веіЕІетепіВу1а('іѕрІау' ) ; 
} 


Ғопсйоп ғвеїЕееаЕіетепіѕ(){ 
Ғееаріу=оситепі.веЕ1етепіВу1а('Ғееаѕ' ) ; 


} 

Теперь код стал более понятным: в обработчике \1пдо\.оп[оа49() каждой 
подсистеме соответствует одна строка, однако объединенная функция все еще 
остается слабым местом и способна доставить неприятности. В следующем 
разделе мы рассмотрим альтернативное решение. Оно более сложное, но обес- 
печивает большую надежность. 


Образ разработки ОБзегиег 


Иногда бывает полезно задать себе вопрос: какой компонент отвечает за то 
или иное действие? В нашем случае составная функция возлагает на объ- 
ект міпаоу ответственность за получение ссылок на элементы РОМ. Теперь 
объект окна должен знать, какая из подсистем присутствует на странице. 
В идеале каждая подсистема должна сама отвечать за получение ссылок. 
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В этом случае, если подсистема присутствует, она получит ссылки, в против- 
ном случае действия по определению ссылок выполняться не будут. 

Для того чтобы обеспечить разделение ответственности, мы дадим воз- 
можность подсистемам регистрироваться для оповещения. Для этого каждая 
подсистема должна указать функцию, которая будет вызвана при наступле- 
нии события оШоа4. Реализуется такое решение следующим образом: 

міпаоу.опоаа[іѕіепегѕ=пем Аггау(); 

міпаож.аааобп[Г оаа 1ѕќепег(1іѕќепег) { 
міпаож.опіоаа1іѕѓепегѕ[уіпаоу.опіоаа[ іѕѓепегѕ.Іепеіћ ]|=Из{епег; 


} 


После загрузки окна объект міпаоу должен лишь осуществить перебор 
элементов массива и вызывать по очереди каждую функцию. 


міпаожу.опоаа=ѓипсііоп(){ 


Гог(уаг 1=0;і<міпаӢож.опіоаат1іѕіепегѕ.Іепвіһ;і++){ 
уаг Ёџпс=ұүіпаоу.опПоаа1іѕќепегѕ[1] ; 
Ғипс.сапо ; 


} 
} 


Если каждая подсистема будет создана с использованием данного подхо- 
да, мы обеспечим работу с ними, не объединяя фрагменты кода. Конечно, 
при этом существует опасность некорректно переопределить \1пдо\. оп1оаа, 
что приведет к разрушению системы. Однако, поскольку "опасный" фрагмент 
лишь один, мы можем позаботиться, чтобы это не произошло. 

Следует заметить, что новая модель событий МЗС допускает существо- 
вание нескольких обработчиков событий. Однако эта модель по-разному реа- 
лизована в различных браузерах, поэтому мы предпочли сформировать соб- 
ственный обработчик на базе знакомой модели событий ЈауаЅсгірё. Подробнее 
данный вопрос будет рассмотрен в главе 4. 

В данном случае мы реструктуризируем код для того, чтобы он соответ- 
ствовал образу разработки Обѕегуег. Согласно данному образу определяется 
объект ОбзегуаЫе (в данном случае это встроенный объект окна) и набор об- 
работчиков Обѕегуег или [%епег, которые могут регистрироваться в объекте 
ОБзегуае (рис. 3.2). 

При использовании образа Обѕегуег ответственность разделяется меж- 
ду источником события и обработчиком. Обработчики отвечают за свою ре- 
гистрацию и ее отмену. На источник события возлагается ответственность 
за поддержку списка зарегистрированных обработчиков и оповещение о на- 
ступлении события. Данный образ давно используется при программирова- 
нии пользовательских интерфейсов, управляемых событиями. Мы вернемся 
к нему в главе 4, когда будем подробно обсуждать события ЈауаЅсгірі. Как 
вы увидите, механизм событий может быть использован независимо от обра- 
ботки браузером действий пользователя с мышью и клавиатурой. 

Теперь перейдем к рассмотрению следующей проблемы, которая также 
может быть решена путем реструктуризации. 
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Рис. 3.2. Разделение ответственности согласно образу 
разработки Орѕетмег. Объекты Обзегиег, которые должны 
оповещаться о событии, могут регистрироваться в объекте 
ОБзегмаЫе или отменять регистрацию. Все зарегистрированные 
обработчики получают информацию о наступлении события 


3.2.3. Повторное использование обработчиков событий: 
образ разработки Соттапа 


Очевидно, что при работе с большинством приложений пользователь сообща- 
ет им, какие действия надо выполнить (обычно он щелкает для этого мышью 
или нажимает клавиши на клавиатуре), а приложения следуют полученным 
инструкциям. В простых программах может существовать только один спо- 
соб выполнения требуемых операций, но сложные программы обычно раз- 
рабатываются так, чтобы пользователь смог получить требуемый результат 
различными способами. 


Компонент, реализующий кнопку 


Предположим, что в нашем приложении предусмотрен элемент РОМ, кото- 
рый выглядит на экране как кнопка. После щелчка на этой кнопке произво- 
дятся некоторые вычисления и результаты отображаются в НТМГ-таблице. 
Нам необходимо определить функцию обработки щелчка мышью на кнопке. 
Эта функция имеет приблизительно следующий вид: 


Ғопсбоп БаибопОпсИсКНапМет(еует®){ 
уаг аќа=пеу Аггау(); 
ааѓа[0]=6; 
ааба [1] =дӢаёба[0]/3; 
ааба [2] =ааёа [0] *ааба [1] +7; 
уаг пемКом=сгеасеТар1еКои (ЧабаТаЪ1е) ; 
Ғор (маг 1=0; Кааба. 1еподёһ;і++) { 
сгеаёсеТар1еСе11 (пеиКои, даба [1] ) ; 
} 
} 


Мы предполагаем, что переменная дайаТа Ме ссылается на существую- 
щую таблицу и что в функциях сгеж{еТаеВо\() и сгеа{еТаеСей () кор- 


ректно реализованы действия со структурой РОМ. Необходимо заметить, что 
в реальном приложении вычисления могут занимать длительное время, а про- 
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грамма, выполняющая их, может содержать сотни строк кода. Обработчик 
связывается с кнопкой следующим образом: 


риаёёопріу. опс11ск=БаебопОпс11сКНапа1ек; 


Поддержка различных типов событий 


Теперь предположим, что приложение реализуется средствами Адах. Мы об- 
ращаемся к серверу за данными и, получив их, выполняем вычисления и за- 
полняем таблицу. Сейчас не будем говорить о том, как реализовать повто- 
ряющиеся обращения к серверу, предположим лишь, что в нашем распоря- 
жении есть объект роПег. В нем предусмотрены действия с объектом ХМГ- 
НирКеаче$, а обработчик опгеайуѕіаїіесһапее по окончании загрузки дан- 
ных с сервера вызывает функцию опіоаа. Чтобы не углубляться в детали 
вычислений и отображения данных, будем считать, что все необходимые опе- 
рации реализованы в составе вспомогательных функций. 


Ғопсіоп БаИопОпсИскНап ег(еуеп®{ 
уаг Ӣаѓа=са1ісиаїе(); 
ѕһом Юаѓа(ааѓаТаЫе, аа); 


Ғопсііоп ајахОпоааНапраіег()! 
уаг Ӣаїа=са1ісиаїе(); 
ѕһом Юаѓа(оеграѓаТабіе,ааїѓа); 


Ғопсіоп са[сийа{е(){ 

уаг Ӣаїа=пеу Аггау(); 
ааѓа[0]=6; 

ааѓа[1| =аа(а[0]/3; 
ааѓа[2|=ааға[0|*ааїѓа[1]+7; 
геагп ааа; 


Ғопсііоп зВомРаа((а е,аака){ 

уаг пе\уКоу=сгежеТаеКом(аЫе); 
Гог (уаг 1=0;1<даа.1еп210;1++){ 
сгеаїеТаЫеСеП(пем Кож, аѓа[1]) ; 


биќоп Оіу.опсіск=БийќопОпс1іскНалпаїег; 
роПег.опоаа=ајахОпоаанНапаіег; 


Многие действия скрыты в функциях саісиаѓе () и ѕзһожПаќа (), а прин- 
цип установки обработчиков опс1сК и опіоаа уже знаком вам. 

Мы получили более полное разделение бизнес-логики и кода, ответствен- 
ного за обновление пользовательского интерфейса. Как и ранее, мы восполь- 
зовались уже готовым решением. На этот раз нам помог образ разработки 
Соттапа. В объекте Соттапа определяются действия любой сложности, 
после чего сам объект легко передается различным элементам пользователь- 
ского интерфейса. В классических объектно-ориентированных языках объ- 
ект Соттапа обычно создается на основе некоторого базового класса или 
интерфейса. Мы поступим несколько другим способом — будем рассматри- 
вать функции ЈауаЅсгірі как объекты Соттапа, обеспечивающие требуемую 
степень абстрагирования. 
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Рис. 3.3. Использование образа разработки Соттапа для реализации универсального 
стека отмены действий в текстовом процессоре. Все действия пользователя 
представляются как объекты Соттапа и могут быть легко отменены 


Оформление всех действий пользователя в виде объекта Соттапа мо- 
жет показаться сложным решением, однако затрата усилий окупается. Если 
все действия пользователя объединены в объекте Соттапа, мы можем без 
труда связать с ними другие стандартные функции. При обсуждении образа 
разработки Соттапа в качестве примера предоставляемых им возможностей 
чаще всего рассматривается добавление метода ипдо (), предполагающего от- 
мену результатов действий в пределах всего приложения. При использовании 
образа разработки Соттапа объекты, инкапсулирующие действия пользова- 
теля, записываются в стек, а при активизации кнопки, предназначенной для 
отмены действий, извлекаются из стека (рис. 3.3). 


Каждый новый объект помещается в вершину стека, в результате появля- 
ется возможность пошаговой отмены действий. Процесс создания документа 
представляет собой не что иное, как последовательность действий. В какой-то 
момент пользователь может выделить весь текст документа и случайно на- 
жать клавишу <Реае>. При вызове функции ип4о() извлекается верхний 
элемент стека и вызывается его метод опао (), который возвращает удален- 
ный текст. Следующий вызов данной функции отменит выбор текста и т.д. 
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Очевидно, что использование объекта Соттапа для создания стека отме- 
ны действий требует от разработчика дополнительных усилий, направленных 
на то, чтобы после выполнения команды и последующей ее отмены система 
вернулась в первоначальное состояние. Однако возможность отмены преды- 
дущих действий выгодно отличает приложение от тех программ, в которых 
подобная функция не реализована. В особенности это валено для тех прило- 
жений, которые используются длительное время. Как было сказано в главе 11 
создание МеБ-приложений, предоставляющих пользователю удобный интер- 
фейс, — это как раз та область, на которую ориентировались разработчи- 
ки Ајах. 

Объекты Соттапа могут быть полезны тогда, когда необходимо пере- 
давать информацию между отдельными подсистемами приложения. Приме-' 
ром "границы", разделяющей подсистемы, может служить сетевое соедине- 
ние. К рассмотрению образа разработки Соттапі мы вернемся в главе 5, 
которая будет посвящена взаимодействию клиента и сервера. 


3.2.4. Обеспечение единственной ссылки на ресурс: 
образ разработки Ѕіпдіеїоп 


В некоторых случаях валено, чтобы канал, по которому осуществляется вза- 
имодействие с некоторым ресурсом, был единственным. Как и прежде, обра- 
тимся к конкретному примеру. 


Поддержка торговых сделок 


Предположим, что наше Ајах-приложение работает с биржевой информа- 
цией: позволяет пользователю делать реальные покупки и продажи, выпол- 
няет необходимые вычисления, а также обеспечивает режим имитации бир- 
жевой деятельности. Мы определили три режима работы приложения и дали 
им название цветов, которыми подаются известные всем сигналы светофора. 
В режиме реальной работы (зеленом режиме) пользователь может покупать 
и продавать ценные бумаги и выполнять вычисления на основе имеющихся 
данных. Когда биржа закрыта, доступен только режим анализа (красный ре- 
жим), в котором доступны любые действия, кроме реальной покупки и прода- 
жи. В режиме имитации (желтый режим) эмулируются все действия, доступ- 
ные в зеленом режиме, но реальное взаимодействие с рынком не происходит. 

Наша клиентская программа поддерживает режимы с помощью объекта 
Јауа$сгірі. 

уаг МОРЕ ВЕДЕЕ 

уаг МОРЕ АМВЕВ=2 

уаг МОРЕ СКЕЕМ=2 

Ғопсбоп ТгааіпеМоае(){ 

На 

Мы можем запрашивать и устанавливать режим для данного объекта, 
причем не исключено, что это будет сделано в разных местах программы. Мы 
также могли бы определить функции Моде () и ѕеіМоае () и реализовать 
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Рис. 3.4. В рассматриваемом Ајах-приложении средства покупки-продажи и функции 
анализа определяют, какие данные надо использовать: реальные или имитированные. Для 
этого они обращаются к объекту Тгааіпо Моде. В желтом режиме происходит обращение 
к серверу-имитатору, а в зеленом режиме — к реальному биржевому серверу. Если в системе 
имеется несколько объектов Тгадіпо Моде, их состояние может стать несогласованным, 

в результате система будет находиться в неопределенном режиме 


в них проверку условий, допускающих установку режимов или препятствую- 
щих этому (например, эти функции могли бы выяснять, работает ли биржа), 
однако на данном этапе работы ограничимся простым решением. 

Предположим, что пользователю доступны средства, позволяющие поку- 
пать и продавать ценные бумаги, а также вычислять выигрыш или потери от 
сделки, прежде чем совершать ее. В зависимости от режима взаимодействие, 
связанное с покупкой и продажей, может осуществляться с одной из двух 
служб: имитатором в желтом режиме и сервером брокера в зеленом режиме. 
В красном режиме средства взаимодействия заблокированы. Анализ произ- 
водится на основе текущих и предыдущих цен. Источником данных являются 
имитатор в желтом режиме и биржевые сводки в зеленом режиме. Для того 
чтобы определить, откуда следует получать данные и с какой службой долж- 
но производиться взаимодействие при покупке и продаже, надо обратиться 
к объекту ТгадатМоае (рис. 3.4). 

Важно, чтобы средства покупки-продажи и средства анализа обращались 
к одному и тому же объекту Тгайіпе Моде. Если пользователь будет осуществ- 
лять покупки и продажи в режиме имитации, но основываться при этом на 
реальных данных, в худшем случае он получит сообщение о том, что проиг- 
Рал условные деньги. Если же при реальных покупках и продажах пользо- 
ватель будет исходить из данных, полученных от имитатора, он наверняка 
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потеряет работу. 


Объект, существование которого допускается в единственном экземпляре, 
называется единичным объектом (зтеюп). Сначала мы обсудим, как еди- 
ничные объекты поддерживаются в объектно-ориентированном языке, а за- 
тем рассмотрим особенности работы с ними ЈауаЅсгірі-программ. 


Единичные объекты в Чама 


В Тауа и других подобных языках для реализации единичных объектов при- 
меняется следующий подход: конструктор скрывается, а вместо него предо- 
ставляется реі-метод (листинг 3.3). 


Листинг 3.3. Единичный объект ТгадтеМоде в языке Јауа 
рас сІаѕѕ ТгадшеМоде{ 

риуайе ѕіаїіс ТгадшеМо4де іпѕіапсе= пи; 

рибіс іпі тоае; 

ргіуаіе ТгааіпеМоае()! 

поф=МОРЕ КЕР; 


} 


рор1іс ѕёаііс Түгааіпдмоде зее1избапсе () { 
1Е (іпѕіапсе==пи11) { 

іпѕбапсе=пеу Тгааіпдмоае (); 

у 

тесоги 1пзбапсе; 

} 

рор1іс уоіа зеЕМоае (іпі тоде) { 


} 


1 


В языке Јауа для определения поведения единичных объектов использу- 
ются модификаторы доступа ргіуаѓе и руб Пс. Приведенный ниже код не бу- 
дет компилироваться, поскольку конструктор недоступен из других классов. 


пет Тга@1паМоае ().зеЕМоае (МОРЕ _АМВЕК) ; 











Для того чтобы компиляция была выполнена без ошибок, выражение 
должно иметь следующий вид: 


Тгааіпомоде.деё1пѕёапсе () . ѕесмойе (МОРЕ_АМВЕВ) ; 


Такое решение гарантирует, что при каждом обращении к ТгайіпеМойе 
реальный доступ будет предоставлен к одному и тому же объекту. Здесь были 
использованы языковые средства, отсутствующие в ЈауаЅсгірі, поэтому в сле- 
дующем разделе мы рассмотрим, как добиться того же результата, пользуясь 
лишь имеющимися в наличии возможностями. 








Единичные объекты в Јауабсгірї 


В Јауа$сгірі отсутствуют модификаторы доступа, поэтому, для того, чтобы 
"скрыть" конструктор, мы не будем создавать его. Язык ЈауаЅсгірі основан 
на прототипах, а конструкторы представляют собой объекты Еипсіоп (по- 


дробно об этом речь пойдет в приложении Б). Мы можем создать объект 
ТгааіпеМоае обычным способом. 
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Еопсе1оп Тка@1паМоде () { 
с51$ .поае=МоОрЕ_ВЕО; 
} 


Ткаа1паМоае .ргобобуре. зе Моае=ЕопсЕт1оп () { 
} 


В качестве псевдоединичного объекта мы предоставим глобальную пере- 
менную. 


Тгааіпе Моае.іпѕќапсе=пему ТгадтеМоде(); 











Однако такой подход не предотвращает вызов конструктора. С другой 
стороны, мы можем создать весь объект вручную, не прибегая к прототипу. 
уаг Тга@1п9Моае=пем Орјесё (); 
Тгааіпомоае .поде=МорЕ_ВЕО; 
Ткаа1паМоае . зе Моде=ЕапсЕ1ол () { 














} 


Тот же результат можно получить с помощью более краткой записи. 
уаг Тхаа1паМоае= { 

поӣе:МОорЕ ВЕР, 

зеЕМоае : Ёџпсёіоп() { 








} 
№ 
Оба приведенных выше примера генерируют идентичные объекты. Пер- 
вый способ более привычен программистам, использующим Јауа или СЯ. 
Второй способ мы показали здесь потому, что он часто используется в биб- 
лиотеке Ргофофуре и в базовых наборах средств, созданных на ее основе. 
Данное решение работает в пределах одного контекста. Если сценарий 
будет загружен в отдельный элемент 1Егате, он создаст собственную копию 
единичного объекта. Избежать такого эффекта можно, указав, что единич- 
ный объект доступен из документа верхнего уровня (в Јауа$сгірі свойство 


{ор всегда ссылается на текущий документ). Данный подход иллюстрирует- 
ся кодом, представленным в листинге 3.4. 


Листинг 3.4. Единичный объект ТгадшеМоде в Јауа$сгірі 
Еопсйоп сеТгадтеМоде(){ 
1Е (! сор.Тгааіпомоаде) { 
Сор.ТкаЧ1п9Моде=пем Орјесё (); 
Сор.Ткаа1паМоае .моде=МорЕ_ВЕО; 
Сор.Ткаа1паМоае . зе Моде=ЕапсЕ1 ол () { 














} 
| 


у 


гесигп ёор.Тгааіпдмоде; 


Теперь сценарий можно включать в различные элементы І Егате, при 
этом обеспечивается присутствие объекта в одном экземпляре. (Если вы пла- 
нируете поддержку единичного объекта в нескольких окнах верхнего уровня, 
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вам надо обратиться к {ор.орепег. Из-за ограниченного объема книги мы 
предлагаем читателям сделать это самостоятельно.) 

При написании кода пользовательского интерфейса обычно не возни- 
кает потребность в единичных объектах. В основном они бывают необ- 
ходимы при моделировании бизнес-логики на ЈауаЅсгірі. В традиционных 
У\еЬ-приложениях код, реализующий бизнес-логику, обычно располагается 
на сервере, однако появление Ајах может изменить сложившееся положе- 
ние и единичные объекты станут необходимыми и при разработке клиент- 
ских программ. 

Итак, вы получили первое представление о том, каких результатов мож- 
но добиться с помощью реструктуризации. Примеры, рассмотренные в этой 
главе, чрезвычайно просты, но даже они показывают, что реструктуризация 
позволяет упростить код, исключить его слабые места, которые при увеличе- 
нии размеров приложения могли бы привести к некорректной работе и даже 
полной его остановке. 

В процессе обсуждения мы рассмотрели несколько шаблонов разработки. 
В следующем разделе речь пойдет о масштабных программах, работающих 
на стороне сервера, и вы увидите, как можно упорядочить запутанный код 
и обеспечить для него дополнительную степень гибкости. 


3.3. "Модель-представление-контроллер " 


Образы разработки, которые мы рассмотрели в предыдущих разделах, мо- 
гут быть успешно применены для решения частных задач. Существуют также 
образы, предназначенные для организации всего приложения, — их приня- 
то называть архитектурными шаблонами, или архитектурами. В данном 
разделе мы рассмотрим архитектурный шаблон, который поможет в органи- 
зации Ајах-проектов, упрощая его разработку и сопровождение. 

Архитектура "модель-представление-контроллер" (Моде!-УМем-Сопито]|- 
ег — МУС) позволяет выделить фрагменты кода, отвечающие за взаимо- 
действие с пользователем, и отделить их от тех частей программы, которые 
предназначены для выполнения сложных расчетов или реализации бизнес- 
логики. В этой главе мы покажем, как применить ее к разработке сер- 
верных компонентов, управляющих данными для Ајах-приложения. В гла- 
ве 4 мы пойдем еще дальше и применим данную архитектуру для клиент- 
ской Јауа$Ѕсгірі-программы. 

Архитектура "модель-представление-контроллер" определяет три роли, 
в которых выступают различные компоненты системы. Модель описывает 
проблемную область — те задачи, для решения которых и создано прило- 
жение. Так, текстовый процессор моделирует документ, а приложение для 
работы с картами — координаты на местности и контуры ландшафта. 

Представление (его иногда также называют просмотром) — это программ- 
ные средства, которые представляют информацию пользователю: реализуют 
формы ввода, изображения, текст, компоненты. Представление не обязатель- 
но должно работать с графикой. В программе, предоставляющей голосовой 
интерфейс, представление может быть реализовано на базе синтезатора речи. 
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Представление ) 


4. Обновление представления 
1. Действие 
Контроллер ) 


3. Оповещение об изменениях 
2, Модификация 
Модель 

Рис. 3.5. Основные компоненты архитектуры 
"модель—представление-контроллер". Представление и модель не 
могут обращаться друг к другу — они взаимодействуют только через 
контроллер. Контроллер рассматривается как промежуточный 
уровень между моделью и представлением. Благодаря такому 
подходу разграничиваются функции различных частей программы, 


обеспечивается дополнительная степень гибкости и упрощается 
сопровождение приложения 


Основное правило архитектуры МУС гласит, что представление и модель 
не должны иметь доступа друг к другу. На первый взгляд такая программа 
может показаться неработоспособной, но здесь на помощь приходит контрол- 
лер. Когда пользователь нажимает клавишу или заполняет форму, представ- 
ление сообщает об этом контроллеру. Контроллер выполняет действия с моде- 
лью и решает, должно ли измениться представление в соответствии с новым 
состоянием модели. Если изменения необходимы, контроллер сообщает о них 
представлению (рис. 3.5). 


Преимущество подобного подхода заключается в том, что модель и пред- 
ставление практически не связаны между собой; они обладают лишь общими 
сведениями друг о друге. Конечно, информация должна быть достаточна, 
чтобы выполнять задачу, поставленную перед приложением, но совсем не 
обязательно, чтобы она была исчерпывающей. 

Представьте себе программу для работы с перечнем товаров. Контроллер 
предоставляет представлению функцию, которая возвращает список продук- 
тов, соответствующих определенной категории, но представление не знает ни- 
чего о том, как этот список был сформирован. Возможно, что первая версия 
программы содержала в памяти массив строк и заполняла его, читая данные 
из текстового файла. Вторая версия программы могла разрабатываться на 
основе новых требований, и в ней пришлось использовать реляционную ба- 
зу данных. В результате код модели подвергся существенным изменениям. 
Поскольку контроллер по-прежнему доставляет представлению список про- 
дуктов, принадлежащих определенной категории, код представления остает- 
ся неизменным. 


Аналогично разработчики могут модифицировать представление, не опа- 


саясь повредить модель. Понятно, что подобная ситуация сохраняется лишь 
До тех пор, пока будет соблюдаться соглашение об использовании интерфей- 
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сов, предоставляемых контроллером. Разделяя систему на подсистемы, МУС 
гарантирует, что изменения в одной части приложения не повлекут за со- 
бой изменений в другой части, и разработчики, ответственные за поддержку 
каждого компонента, могут работать практически независимо друг от друга. 

У разработчиков классических МеБ-приложений уже накоплен опыт со- 
здания их в рамках архитектуры МУС. Эта архитектура помогает управлять 
последовательностью статических документов, составляющих интерфейс 
приложения. Когда приложение Ајах запускается и запрашивает информа- 
цию с сервера, используется тот лее механизм доставки данных, что и в клас- 
сическом приложении. Таким образом, серверная часть Ајах-приложения мо- 
жет создаваться в рамках архитектуры "модель-представление-контроллер". 
Поскольку вопросы использования этой архитектуры для создания сервер- 
ных программ уже хорошо отработаны и понять основные принципы неслож- 
но, мы начнем обсуждение МУС с серверной части, а затем перейдем к при- 
менениям, специфическим для Ајах. 


Если вам еще не знакомы базовые средства разработки У -программ, 
в следующем разделе вы найдете общие сведения о них и узнаете, как по- 
высить масштабируемость и надежность Ајах-приложения. Если вы имеете 
опыт работы с инструментами Уеб-программирования, например, с процес- 
сорами шаблонов и ОКМ (Објесі- Кејайопа! Марр!1?), либо с такими сред- 
ствами как 51ти{$, Зрипе или Тареѕігу, то, наверное, уже в основном владее- 
те сведениями, которые будут излагаться здесь. В этом случае мы советуем 
вам сразу перейти к главе 4, в которой будут обсуждаться другие способы 
использования этих инструментов. 


3.4. Применение МУС для серверных программ 


Архитектура "модель-представление-контроллер" применима к У\УеБ-прило- 
жениям, даже к их классическому варианту, который мы столь интенсив- 
но критикуем в этой книге. Сама суть У\УеБ-приложения предписывает раз- 
деление представления и модели, поскольку поддерживающие их програм- 
мы выполняются на различных машинах. Значит ли это, что любое МеБ- 
приложение автоматически попадает в категорию МУС и можно ли создать 
такую УеБ-программу, в которой средства представления и модели были объ- 
единены? 

К сожалению, это возможно. Более того, сделать это достаточно про- 
сто, и многие разработчики, в том числе и авторы данной книги, попадали 
в эту ловушку. 

Большинство сторонников применения архитектуры "модель-представле- 
ние-контроллер" считают представлением не средства воспроизведения 
НТМІ -документа, а сам документ и генерирующий его код. Если приме- 
нить такую точку зрения к приложению Ајах, в котором данные переда- 
ются ЈауаЅсгірі-клиенту, окажется, что представление — это ХМГ-документ, 
передаваемый клиенту в составе НТТР-ответа. Для того чтобы отделить до- 
кумент от бизнес-логики, требуются определенные навыки. 


Глава 3. Управление кодом Ајах 123 


ОВМ Процессор шаблонов Анализатор на стороне клиента 
ы— УЫыО— > 


<?хті 


мегѕіоп="1.0*?> 





4. Мер-браузер 


1. Таблицы базы данных 


2, Объектная модель 3. ХМЕ-поток 


Рис; 3.6. Основные компоненты программы, используемой для генерации 
списка продукции интерактивного магазина. Список представляется в формате 
ХМЕ. При генерации представления мы извлекаем данные из базы, заполняем 
ими .структуры, соответствующие изделиям, а затем передаем информацию 
клиенту в виде потока ХМ -данных 


3.4.1 Серверная программа Ајах, созданная без применения 
образов разработки 


В качестве примера, иллюстрирующего обсуждаемый материал, создадим 
серверную программу для приложения Ајах. Основы создания клиентского 
кода Ајах мы уже рассматривали в главе 2 и в разделе 3.1.4, кроме того, мы 
вернемся к этому вопросу в главе 4. Сейчас же мы сосредоточим внимание 
на том, что происходит на Уеб-сервере. Начнем с программы, написанной 
самым простым способом, постепенно реструктуризируем ее в соответствии 
с архитектурой МУС и рассмотрим, выиграет ли от этого приложение. Сна- 
чала определим назначение самого приложения. 


В базе данных хранится информация об одежде, имеющейся в наличии 
в магазине. Нам надо организовать обращение к базе и представить список 
товаров пользователю, причем представляемые данные должны содержать 
изображение, заголовок, краткое описание и цену. Если существуют различ- 
ные варианты одного и того же изделия, отличающиеся, например, цветом 
или размером, это также надо учесть. На рис. 3.6 показаны основные компо- 
ненты системы, а именно: база данных, структура данных, представляющая 
конкретный продукт, и ХМГ-доку мент, передаваемый Адах-клиенту с переч- 
нем всех продуктов (документ должен соответствовать запросу). 

Предположим, что пользователь только что приступил к работе и ему 
предлагается выбрать категорию мужской, женской или детской одежды. 
Каждое изделие принадлежит одной из этих категорий; соответствующая 
информация хранится в базе данных, в столбце Саѓевогу таблицы Сагтепіѕ. 
5ОГ-запрос, предназначенный для получения данных категории Мепз\еаг, 
имеет следующий вид: 














ЅЕТЕСТ * ЕВОМ дагмепез МНЕВЕ САТЕСОВУ = 'Мепзмеаг'; 

















Нам надо получить результаты этого запроса, а затем передать их Ајах- 
приложению в формате ХМГ. Рассмотрим, как можно сделать это. 
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Генерация ХМЕ-данных для передачи клиенту 


В листинге 3.5 представлен код, решающий поставленную задачу. Пока этот 
код далек от совершенства. В данном примере используется технология РНР 
совместно с базой данных МуЗОГ, однако для нас важна лишь структура 
программы. Принципиально ничего не изменится, если вместо РНР мы при- 
меним АЅР-, или ЈЅР-документ, или сценарий Кабу. 


Листинг 3.5. Код, генерирующий ХМЕ-данные на основе запроса к базе 
<?рһр 
// Информация для клиента о том, что ему пересылается 
// ХМІ-информация 
феааех ("Сопёепі-іуре: арр1ісаёіоп/хт1"); 
есһо "<?хш1 уегз1оп=\"1.0\" епсоа1та=\"ОТЕ-8\" ?>\п"; 
Ѕар=пуѕа1_соппесі ("пу ар ѕегуег", "пуѕа1_ иѕег") ; 
// Получение данных из базы 
шузѕза1_ѕе1іесі_ ар ("муаЪ" , ары); 
Ѕѕа1="ЅЕГЕСТ іа, ёіёб1е, аеѕсгірёіоп,ргісе, со1огѕ,ѕіхлеѕ" 
."ЕВОМ дасгтепіѕ МНЕВЕ саёбедогу=\" { $саб}\""; 
бтеза1Е=муза1 _ацеку (58591,54); 
есһо "<дагтепез>\п"; 
// Просмотр набора результатов 
иһі1е (бпугом = гауѕа1_Ғеёсһ гом (Ѕ$геѕи1ё)) { 
ргіпёєЁ ("<дагтеп іа=\"%5\" Е1Е1е=\"$%$5\">\п" 
."<аеѕсгірііоп>%5</деѕсгірііопь\п<ргісе>%$</ргісе>\п", 
Ѕшугои ["1а"], 
бтуком ["Еіё1е"], 
бтугом [ "Яаеѕсгірёіоп"], 
бтуком [ "ргісе"]); 
ЇЕ (!1іѕ пи11 (Ѕшугоу["со10орѕ"])) { 
есһо "<со1огѕ> { Ѕ$шугои [ 'со1огз'] }</со1ох$>\п"; 
} 
1Е (!іѕ пи11 (бмуком["в17ез"])) { 
есһо "<ѕіхлеѕ> { Ѕшугои['ѕілеѕ'] }</ѕілеѕь\п"; 
} 
есһо "</дагтепё>\п"; 
} 
есһо "</дагтепЕз>\п"; 
> 























Код РНР в листинге 3.5 генерирует ХМГ-документ. Если условиям запро- 
са удовлетворяют только два изделия, этот документ будет выглядеть так, 
как показано в листинге 3.6. Отступы были добавлены лишь для того, чтобы 
код стал более удобным для восприятия. Язык ХМГ, очень часто использу- 
ется для обмена данными между клиентом и сервером, кроме того, в главе 2 
мы уже говорили об обработке ХМТ-документа, полученного с сервера с по- 
мощью объекта ХМІ.НирКедиеѕі. В главе 5 мы рассмотрим другие варианты 
организации обмена. 


Листинг 3.6. Пример данных, сгенерированных кодом из листинга 3.5 
<рагтепіѕ> 

<рагтепі іа="5СК001" #1е="Со1Ғегѕ ЗосК$"> 

<аеѕсгірііоп> Сагіѕһ Фатопа раіегпеа ѕоскѕ. Кеа! жоо]. 
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Кеа!| ИсВу. </аеѕсгірііоп > 

<ргісе>$5.99</ргісе> 

<со1огѕ> пеаїћһег сотбо,һамаііап ште4еу, Па ёогкеу< /со1огѕ> 
</вагтепі> 

<вагтепі іа="НАТО56" 1ії1е=" Оеегѕіа1 кег Сар"> 
<аеѕсгірііоп> Сотріеїе жміїһ 1 Нарру Ыбіїзѕ. 

Аз могп Бу {һе вгеаї еїесїіуе Ѕһегіоск Но|тез. 
Ріре 1$ тоае1'ѕ омп.</еѕсгірііоп> 
<ргісе>$79.99</ргісе> 

<517е5>8, М, Г, ХІ, еврһеаа< /ѕілеѕ> 

</вагтепі> 

</вагтепіѕ> 





Итак, мы получили серверную программу УеБ-приложения. Считаем, 
что Ајах-клиент способен правильно обработать полученные ХМГ-данные. 
Попробуем представить себе дальнейшее развитие этой программы. Предпо- 
ложим, что ассортимент продукции расширился и нам надо ввести новые 
категории (например, Ѕтагі, Сазиа1, Оџѓӣоог). Кроме того, необходимо ре- 
ализовать поисковую функцию и установить ссылку на сервер химчистки. 
Очевидно, что ХМГ-документ позволяет включить новые данные. Однако 
сможем ли мы повторно использовать имеющийся код и какие препятствия 
встретим при решении этой задачи? 


Проблемы с повторным использованием кода 


Организовать повторное использование сценария в том виде, в котором он су- 
ществует в данный момент, непросто. Во-первых, мы "жестко" запрограмми- 
ровали ЗОГ-запрос в составе документа. Если мы захотим изменить критерии 
поиска, запрос нам придется генерировать по-другому. По мере добавления 
вариантов запроса в программе накопится большое количество выражений. 
Ситуация может развиваться еще хуже. Рассмотрим следующее выражение: 

$за-="ЗЕГЕСТ іа, ие , Чезсгироп ,рг1се, со1Іогѕ,ѕілеѕ" 

"ЕВКОМ вагтепіѕ УНЕВЕ ".$за\ете; 

Если мы разрешим передавать произвольные выражения НЕВЕ как СС]- 
параметры, то можем получить следующий результат: 

вагтепіѕ.рһр?ѕаМ\еге=САТЕСОВҮ="Мепѕуеаг" 


Такое решение приводит к некорректной работе модели и представле- 
ния, а также создает возможность для атак с применением ЗОГ-выражений. 
Несмотря на то что современная система РНР имеет встроенные системы 
защиты, не стоит полагаться на них. 

Во-вторых, мы "жестко" запрограммировали формат ХМГ (он определя- 
ется структурой выражений ргіпіѓЁ и есһо). Однако по ряду причин формат 
Данных может быть изменен. Не исключено, например, что руководство при- 
мет решение выводить не только цену, по которой продается товар, но и цену 
производителя. 


126 Часть. Новый взгляд на ИеБ-приложение 


Сагилег\$ Соіогѕ 


Саппепіѕ 10 Соіогѕ 


175 





Рис. 3.7. Отношение "многие ко многим", реализованное в базе данных. 
В таблице Со1Іогзѕ перечислены значения цвета для всех изделий, 

в результате исчезает необходимость хранить информацию о цвете 

в таблице Оагтепіѕ 


В-третьих, для генерации ХМГ-данных непосредственно используется на- 
бор результатов, полученный после обработки запроса к базе. На первый 
взгляд, кажется, что такое решение обеспечивает высокую эффективность 
работы, но при этом возможны две проблемы. Соединение с базой остается 
открытым в течение всего времени генерации ХМГ-данных. В данном слу- 
чае в цикле мһіе не производятся сложные расчеты и соединение не будет 
открыто слишком долго, но в общем случае такое решение может стать при- 
чиной напрасного расходования ресурсов. Кроме того, подобный подход при- 
меним, только если мы рассматриваем базу данных как "плоскую" структуру. 


3.4.2. Реструктуризация модели 


На данном этапе работы мы храним списки цвета и размеров чрезвычайно 
неэффективно — помещаем значения, разделенные запятыми, в поля таб- 
лицы Сагтепіѕ. Чтобы преобразовать данные в соответствии с реляционной 
моделью, мы должны создать отдельную таблицу для хранения всех доступ- 
ных значений цвета и вспомогательную таблицу, которая связывала бы изде- 
лия с цветом. Подобное отношение называется "многие ко многим" и показа- 
но нарис. 3.7. 

Предположим, например, что вам нужна охотничья шляпа и вы хотите 
выяснить, шляпы каких цветов есть в наличии. Для этого вы обращаетесь 
к ключу вагтепі іа в таблице Сагтеп($ ќо Со1огѕ. Эти записи дают воз- 
можность получить первичные ключи в таблице Со10гѕ, и по ним мы видим, 
что в наличии имеются охотничьи шляпы цвета ѕһосКкіпе ріпк и Бшееггу, 
а шляп цвета Ба {езВ1р этау нет в наличии. Можно сформировать и обрат- 
ный запрос и использовать таблицу Сагтепіѕ їо Со]ог$, чтобы выяснить, 
какие изделия имеют требуемый цвет. 
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Теперь структура данных стала более строгой, но для того, чтобы полу- 
чить информацию, надо формировать сложные запросы. Вместо того чтобы 
формировать такие запросы вручную, было бы лучше, если бы изделие мож- 
но было рассматривать как объект, в составе которого присутствовали бы 
массивы, задающие варианты цвета и размеры. 


Инструмент ОЫјесі-Веіайопаі Марртд 


Существуют средства, способные выполнить описанную задачу за нас. Для 
этой цели подходит набор инструментов ОКМ (Објесі- КеІаіопа! Марріпе), 
которые автоматически преобразуют данные, содержащиеся в базе, в объ- 
ект, хранящийся в памяти компьютера. При этом разработчик избавлен от 
необходимости формировать низкоуровневые 5ОГ-выражения. Программи- 
сты, использующие РНР, могут обратиться к РЕАК ЮВ раѓаОбјесі, ЕХР- 
ро (Еазу РНР раѓа Објесіѕ) или Меќаѕіогаре. Разработчики, применяющие 
Јауа, ограничены в выборе. Им доступен лишь продукт НШегпае (теперь 
он перенесен и на платформу .МЕТ). Инструменты ОКМ — обширная тема, 
рассматривать которую мы сейчас не будем. 

Рассматривая наше приложение с точки зрения МУС, легко увидеть, что 
применение ОКМ дает интересный побочный эффект — с самого начала у нас 
в руках оказываются основы модели. Мы можем написать программу гене- 
рации ХМГ-данных, которая будет взаимодействовать с объектом Сагтепі, 
предоставив ОКМ самостоятельно выполнять все необходимые действия с ба- 
зой. Мы больше не привязаны к АРІ конкретной базы данных и не должны 
учитывать особенности ее работы. В листинге 3.7 показаны изменения кода, 
связанные с переходом к ОКМ. 

В данном случае мы определяем бизнес-объекты (т.е. модель) на РНР, 
используя Реаг: :ОВ ЮОаѓаОбЫјесі, в результате чего наши классы становят- 
ся расширением базового класса ЮВ ШРаѓаОбЫјесі. Различные ОКМ дела- 
ют это по-разному, но в результате мы получаем набор объектов, к ко- 
торым можем обращаться как к обычному коду, абстрагируясь от слож- 
ных $01.-выражений. 


Листинг 3.7. Объектная модель для приложения 
гесоиіге опсе "Рв/Раёаорјесі.рһр"; 
с1аѕѕ СагтепіСо1ог ехёепаѕ рв раёаорјесі { 
уах $1а; 
уаг $дагиепе_1а; 
уар $со1ог_1а; 
} 
с1аѕѕ Со1ог ехіепаѕ рв раёаорјесі { 
уаг $1а; 
уаг бпаме; 
} 
с1аѕѕ СагмейЕ ехбепаз рв раёаорјесі { 
уар $1а; 
уар $Е1Е1е; 
уар ЅаӢеѕсгірііоп; 
уаг $рг1се; 
уар $со1огѕ; 
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уар б$саіедогу; 

Ғџпсііоп сдеёСо1огѕ () { 

1Е (1!15зе6 ($6һіѕ->со1огѕ)) { 
51іпкорјесі=пет СагтепёСо1ог (); 
51іпкорјесі->дагктепі іа = ЅЕһіѕ->іа; 
51іпкОрјесё->#іпа(); 
бсо1ог5=аггау (); 

мһі1е (511іпкОрјесі->Ёеёсһ()) { 
Ѕсо1огОорјесі=пем Со1ог(),• 
Ѕсо1огОорјесё->іа=511пкоОрјесё->со1ог іа; 
Ѕсо1огОрјесё->Ёіпа(); 

мһі1е (Ѕсо1огорј есі->Ғеёсһ ()) { 
Ѕсо1огѕ[] = с1опе (Ѕ$со1огОрјесіё); 

} 

} 

} 

геіоџгп $со1огз; 

} 
} 


Помимо основного объекта Сагтеп, мы определяем объект Со]ог и ме- 
тод объекта Сагтеп, предназначенный для получения всех доступных цве- 
тов. Размеры поддерживаются аналогичным способом. Поскольку библиоте- 
ка непосредственно не поддерживает отношение "многие ко многим", нам надо 
определить объект для связующей таблицы и организовать перебор в мето- 
де ге Со/[ог$ (). Несмотря на это модель выглядит завершенной и удобна 
для восприятия. Рассмотрим, как можно применить данную модель к наше- 
му документу. 


Использование обновленной модели 


Мы сгенерировали модель на основе более совершенной структуры базы дан- 
ных. Теперь нам надо использовать ее в нашем РНР-сценарии. В листинге 3.8 
показан код страницы, использующей объекты на базе ОКМ. 


Листинг 3.8. Страница, использующая ОВМ для взаимодействия с базой 
<?рһр 
Һеадег ("Сопёепі-ёуре: арріісаёіоп/хт1"); 
есфо "<?хи1 уегѕіоп=\"1.0\" епсоаіпа=\ "ОТЕ-8\" ?>\п"; 
1пс1аае "даппепі риѕіпеѕ8 орјесёѕ.іпс" 
баагмепЕ=пем Сагтепі; 
Ѕдагтепё->сабседогу = $ СЕТ [ "са" ]; 
Ѕпитрегр оЁ коиѕ = Ѕдагтепі->Ёіпа(); 
есһо "<дагтмепіѕ>\п"; 
мһі1е ( $дагтепё->Ғеісһ()) { 
ргіпіЁ ("<дагмеп 1а=\"%5\" 6161е=\"%5\">\п" 
. "<аеѕсгірёіоп>%5</ йеѕсуЈ^Еіоп>\п<ргісе>%5</ргрісе>\п", 
Ѕдагтепі->іа, 
Ѕдагтепё->ёіё1е, 
Ѕдагтепі->ӣеѕсгірёіоп, 
$аагмепе->рг1се 
); 
бсо1огѕ» 





Глава 3. Управление кодом Аах 129 


$аагтепе->чеЕСо1огз(); 

1Е (соопё (6со1охгз) >0) { 

есһо "<со1ог$>\п"; 

Ғог ($1=0; $1<соџпё ($со1огѕ);$1++) { 
есһо "<со1ог> { 5со1огѕ [51] }</со1ох>\п"; 


} 

есһо "</со1огз>\п"; 
} 

есһо "</дагтете>\п"; 
} 
есһо "</дахмете$>\п"; 
?> 


Вместо того чтобы конструировать ЗОГ-запросы, создается пустой объ- 
ект Сагтепі, который затем частично заполняется данными, представляю- 
щими собой критерии поиска. Поскольку модель включается из отдельного 
файла, мы можем повторно использовать ее для поиска. Средства представ- 
ления ХМГ также генерируются на основе модели. Наши последующие дей- 
ствия по реструктуризации направлены на разделение ХМГ-данных и про- 
цесса их генерации. 


3.4.3. Разделение содержимого и представления 


Код представления пока еще не отделен от объекта. Причина в том, что фор- 
мат ХМЕ связан с кодом, предназначенным для его анализа. Если мы рабо- 
таем с несколькими страницами, будет полезно, если мы сможем изменить 
ХМГ-формат в одном месте приложения, оставив другие фрагменты без из- 
менений. В более сложном случае может понадобиться поддержка нескольких 
форматов, например, один для представления перечня товаров пользовате- 
лю, а другой для управления самим магазином. Поэтому желательно опре- 
делить каждый формат только один раз и обеспечить для них централизо- 
ванное отображение. 


Системы на базе шаблонов 


Для решения данной задачи используется язык шаблонов. Система, поддер- 
живающая шаблоны, получает текстовый документ, содержащий специаль- 
ную разметку. Элементы разметки обозначают позиции реальных перемен- 
ных. К языкам шаблонов можно отнести РНР, АЅР и ЈЅР, которые позволяют 
включать фрагменты кода в содержимое У\еБ-страниц. Этим они принципи- 
ально отличаются от кодов, включающих содержимое, примерами которых 
являются Јауа-сервлеты или традиционные сценарии ССІ. Несмотря на то 
что сценарии предоставляют достаточно мощные средства обработки запро- 
сов, используя их, очень трудно разделить бизнес-логику и представление. 
Языки сценариев, ориентированные на конкретное применение, напри- 
мер РНР Ѕтагіу и Арасһе Уеюосйу (система на базе Јауа; при переносе на 
платформу .МЕТ она получила название М Уеосйу), предоставляют ограни- 
ченные возможности для создания кода. В ряде случаев поток управления 
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может содержать лишь ветвление (оператор 11) и циклы (например, операто- 
ры Гог и һе). В листинге 3.9 показан шаблон РНР Зтацу для генерации І 
ХМГ-данных. 


<?хм1 уег$1о0оп="1.0" епсоа1па="ОТЕ-8" ?> 

<дагиепе$> 

{ѕесііоп паме=дакмепЕ 1оор=бадагтепез} 

<аагтепі 19=" {$уагтепі.ійа}" ііб1е=" {$ӯагтепі.біё1е} "> 
<аеѕсгірііоп> { Ѕ5ӯдагтепі . деѕсгірёіоп } < / аеѕскірііоп> 
<рг1се> { Ѕ5дагтепі .ргісе)} </ргісе> 

(1Е соџпі ($дагмепе .деёСо1ог ())>0} 

<со10огѕ> 

{ѕесііоп папе=со1ор 1оор=ѕЅдагтепё .деіСо1ог() } 
<со10ог>Ѕсо1ог->патпе</со1ог> 

{/ѕесііоп} 

</со10огѕ> 

{/1#} 

</аагтепі > 

{/ѕесііоп} 

</дагтепіѕ> = 


Входной информацией для шаблона является переменная массива заг- 
тепіѕ, содержащего объекты Сагтепі. Блыпая часть шаблона генерируется 
процессором, а разделы в фигурных скобках интерпретируются как инструк- 
ции. Они либо заменяются именами переменных, либо интерпретируются как 
выражения ветвления и циклов. Структура выходного ХМГ-документа, вы- 
раженная в виде шаблона, воспринимается гораздо лучше, чем код, подобный 
тому, который был представлен в листинге 3.7. Теперь поговорим о том, как 
применить шаблон к нашему документу. 


Использование обновленного представления 


Мы переместили определение ХМГ-данных из основного документа в шаблон 
Ѕтагіу. В результате главная страница должна лишь установить процессор 
шаблона и передать необходимые данные. В листинге 3.10 отражены измене- 
ния, необходимые для этого. 


Листинг 3.10. Использование Ѕтапйу для генерации ХМЕ-данных 
<?рһр 

һеааег("Сопѓіепі-іуре: аррісаійоп/хті"); 
іпсіоае "вагтепі Биѕіпеѕѕ објесіѕ.іпс"; 
шее "ѕтагѓу.с1аѕѕ.рһр"; 
фвагтепі«хпеу РаѓаОбЫјесіѕ Сагтепі; 
$вагтепі->саїевогу = $ СЕТ["саќ"] ; 
фпштбег оЁ гомѕ - $вагтепі->йпа(); 
$ѕтагіу-пеү Ѕтагїіу; 
$3тагіу->аѕѕівп('вагтепіѕ', $вагтепіѕ); 
Ўзтатіу->4діѕріау( вагтепіѕ хи! Г); 

?> 
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рис. 3.8. Архитектура ММС применима 
„Мер-приложениям. Меб-страница или 
сервлет действует как контроллер 
„обращается к модели для получения 
данных. Затем эти данные передаются 
1 йлу шаблона (представление), 
который генерирует содержимое, 
предназначенное для передачи 
клиентской программе. Заметьте, что 

„ данной ситуации предусмотрено 
только чтение данных. При 
модификации модели поток событий 
несколько изменится, но роли 
составных частей приложения 
останутся прежними 






Меб-браузер 


Представление 


Обычно действия с шаблонами насчитывают три этапа. Сначала мы со- 
здаем шаблон Ѕтагіу, затем заполняем его переменными. В данном случае 
переменная только одна, но мы можем использовать их столько, сколько нам 
надо. Например, если информация о пользователе хранится вместе с дан- 
ными о сеансе, мы можем сформировать посредством шаблона персональное 
приветствие. После этого мы вызываем функцию 4іѕрІау () и передаем ей 
имя файла шаблона. 


Итак, нам удалось отделить представление от страницы с результатами 
поиска. Формат ХМГ, определяется только один раз, и мы можем организо- 
вать воспроизведение данных несколькими строками кода. Страница с ре- 
зультатами поиска теперь ориентирована на решение одной задачи и содер- 
жит только необходимую для этого информацию, а именно: параметры по- 
иска и определение выходного формата. Если вы помните, мы хотели обес- 
печить возможность легко переходить к форматам, альтернативным ХМІ. 
С помощью Зтайу это достигается просто, мы лишь определяем дополни- 
тельный формат. Если мы хотим реализовать структуру, обеспечивающую 


минимум изменений, мы можем даже использовать шаблон внутри друго- 
го шаблона. 


Если вы вспомните, в чем состоит архитектура "модель-представление- 
контроллер", то увидите, что наше приложение соответствует ей. Реализация 
приложения условно показана на рис. 3.8. 

В нашем наборе объектов постоянное хранение модели в базе данных обес- 
печивается посредством ОВМ. Представлением служит шаблон, определяю- 
щий ХМГ-формат. Контроллер — это страница "поиска по категории" и дру- 
гие документы, которые мы создадим и которые будут объединять модель 
и представление. 

Мы рассмотрели пример применения архитектуры "модель-представление 
контроллер" к \еБ-приложению. Мы обсуждали серверные программы при- 
ложения Ајах, поддерживающего ХМТ-документы, но нетрудно понять, как 
применить данную архитектуру к классическому М№еБ-приложению, поддер- 
живающему НТМТ-документы. 

В зависимости от технологий, возможны вариации данного образа раз- 
работки, но общие принципы остаются теми же. Компоненты Епќегргіѕе Јау- 
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аВеапѕ, поддерживаемые в Ј2ЕЕ, реализуют модель и контроллер и даже 
позволяют помещать их на различные серверы. Классы „МЕТ делегируют 
функции контроллера объектам, специфическим для конкретных страниц. 
Базовые средства из библиотек типа $51ги{$ определяют контроллер передне- 
го плана (боп сопігоПег), который перехватывает все запросы к приложению 
и перенаправляет их. При использовании Арасһе 5їгиіѕ возможно решение, 
при котором контроллер будет переадресовывать пользователя от одной стра- 
ницы к другой. Но в любом случае общие принципы архитектуры остаются 
неизменными. Это одна из причин популярности МУС среди разработчиков 
УеБ-приложений. 

Архитектура "модель—представление-контроллер" упрощает работу над 
программами для М№еБ и вполне применима не только для классических, но 
и для Ајах-приложений. Однако в Ајах архитектура МУС используется не 
единственным способом. В главе 4 мы рассмотрим разновидности данного 
образа, обеспечивающие преимущества структурированной разработки для 
всех компонентов приложения. Однако сначала рассмотрим еще один способ 
упорядочения Ајах-приложений. 

Помимо реструктуризации кода, мы можем упростить работу над ним, 
используя базовые средства и библиотеки независимых разработчиков. По 
мере возрастания интереса к Ајах появляются новые средства разработки, 
Рассмотрением наиболее популярных из них мы завершим данную главу. 


3.5. Библиотеки независимых производителей 


В большинстве случаев целью реструктуризации является устранение повто- 
рений кода. Для этого фрагменты кода оформляются в виде функций или 
объектов. Логичным завершением этих действий является помещение часто 
используемых функций в библиотеки, которые могут быть повторно исполь- 
зованы в других проектах. При этом уменьшается объем кода, создаваемого 
вручную, и повышается производительность труда программиста. Более того, 
поскольку библиотечный код уже был отлажен и протестирован в предыду- 
щих проектах, качество программ должно возрасти. 

На протяжении этой книги мы время от времени будем создавать про- 
стые, но универсальные средства разработки. Вы можете использовать их 
при работе над своими проектами. В главах 4 и 5 мы разработаем объект 
ОбјесіУіеуег, в главе 5 — объект СоплтапаОцеие, в главе 6 — средства опо- 
вещения, в главе 9 — элемент профилирования З{ормасй, а в приложении 
А — отладочную консоль. В конце глав 9 и 13 будут рассмотрены несложные 
примеры. Там же мы реструктуризируем созданные программы, превратив 
их в компоненты, пригодные для повторного применения. 

Очевидно, что не мы одни интересуемся Ајах и ЈауаЅсгірі, поэтому мно- 
гие средства для работы с ними, многократно проверенные разработчиками, 
сейчас доступны в Интернете. 

В этом разделе мы рассмотрим некоторые библиотеки и наборы базовых 
средств, которые были созданы независимыми производителями и доступ- 
ны для использования в Ајах-приложениях. На сегодняшний день популяр- 
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НОСТЬ Ајах высока, поэтому мы не можем детально описать все приложения 
„ Постараемся дать вам лишь общее представление о том, какие продукты 
существуют и как они помогут вам навести порядок в коде ваших проектов. 


3.5.1. Библиотеки, обеспечивающие работу 
с различными браузерами 


Как было сказано в разделе 3.2.1, несоответствие браузеров не исчезло с по- 
явлением Ајах-приложений. Ряд библиотек предлагает функции, позволя- 
ющие скрыть несоответствие браузеров, рекомендуя единую точку обраще- 
ния к соответствующим средствам (другими словами, они реализуют образ 
разработки Еагаае). Одни из них ориентированы на конкретные функции, 
другие пытаются предоставить среду программирования с более развиты- 
ми возможностями. 


Библиотека х 


Библиотека х предназначена для решения задач, возникающих при написа- 
нии ОНТМІ-приложений. Она была впервые представлена в 2001 году и яв- 
ляется развитием более ранней библиотеки СВЕ (Сгоз$-Вто\зег Ехіепѕіопѕ). 
Эта библиотека предоставляет функции, позволяющие обрабатывать в раз- 
личных браузерах элементы РОМ и стили, работать с моделями событий, 
а также поддерживает анимацию и перетаскивание объектов с помощью мы- 
ши. Библиотека х допускает работу с Пиегпе{ Ехр]огег, начиная с версии 4, 
и с последними версиями браузеров Орега и МохШа. 

Стиль кодирования библиотеки х основан на использовании функций; 
причем переменное количество параметров и отсутствие поддержки типов 
позволяют извлечь дополнительные преимущества. Например, для метода 
дӢоситепі.веїЕ1етепіВу1а4(), обрабатывающего только строковые данные, 
создана оболочка, которая принимает как строки, так и элементы РОМ. Ес- 
ли передана строка, осуществляется преобразование идентификатора, а эле- 
мент РОМ возвращается в неизменном виде. В результате вызов хе Е е- 
тепіВу1а() гарантирует, что параметр будет преобразован в узел РОМ; при 
этом отпадает необходимость выполнять проверку и использовать условный 
оператор. Возможность замены элемента РОМ текстовым идентификатором 
полезна при динамической генерации кода, например, при передаче строки 
методу ѕеіТітеоиї () либо при организации обратного вызова. 

При работе со стилями для элементов ООМ используются функции, по- 
средством которых можно как получать, так и устанавливать значение. Рас- 
смотрим следующее выражение: 


хит ав (муЕ1етепі) 
В результате выполнения функции возвращается значение ширины для 
элемента РОМ (где шуЁетеп — либо элемент, либо его идентификатор). 


Добавляя дополнительный параметр, можно использовать ту же функцию 
Для установки значения ширины. 





хиіаеєћ (пуЕТетере , 420) 
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Следовательно, чтобы задать ширину элемента равной ширине другого 
элемента, надо использовать выражение. 


х\ а (ѕесопаЕетепі, х\іаҺ (#гѕ1ЕЈетепќ)) 


Библиотека х не содержит кода для передачи запросов по сети, но 
она может быть полезна при создании пользовательских интерфейсов 
для Ајах-приложений. 


Библиотека Ѕагіѕѕа 


Библиотека Ѕагіѕѕа в основном ориентирована на работу ЈауаЅсгірі-сценариев 
с ХМІ-данными. Она поддерживает М5ХМГ  АсйуеХ-компоненты Пиегпе 
ЕхріІогег (начиная с версии 3) и базовые функции Мо7Ша, Орега, Копачегог 
и Ѕаѓагі. Расширенные средства, такие как ХРа и ХЅІТ, поддерживаются 
не для всех указанных браузеров. 

Для разработчиков Ајах-приложений наиболее важными функциями яв- 
ляются поддержка объекта ХМ НиИрКеаие$( в различных браузерах. Вместо 
того чтобы создавать объект типа Еаса4е, Ѕагіѕѕа использует образ разработ- 
ки Адарег для создания объекта ХМІ.НќрКедиеѕі в тех браузерах, в кото- 
рых отсутствует встроенный объект с таким именем (в частности, Шиегпет 
Ехр]огег). Код, реализующий описанные средства, конечно же, обращается 
к объектам АсйуеХ так, как было описано в главе 2, но эти действия оста- 
ются невидимыми для разработчика. Например, после импортирования биб- 
лиотеки Ѕагіѕѕа следующий фрагмент кода будет выполняться независимо от 
используемого браузера: 

уаг хһг = пеу ХМЕНиИрВеаиез((); 

хһг.ореп("СЕТ", "тураѓа.хті"); 

хһг.опгеайуѕіаіесһапеое = ҒЁипсіоп(){ 


16(хһг.геаау$(аїе == 
аІегі(хһг.геѕропѕеХМі); 


} 


хЬг.зепа (пи); 


Сравните этот фрагмент с кодом, представленным в листинге 2.11, и за- 
метьте, что вызовы функций АРІ осуществляются так же, как и в браузерах 
Мо7Ша и Ѕаѓагі, содержащих встроенный объект ХМІ. НирКедџеѕі. 

Как было сказано ранее, Ѕагіѕѕа также представляет универсальные сред- 
ства для работы с ХМГ-документами, в частности, позволяет выполнять се- 
риализацию произвольных объектов ЈауаЅсгірі и представлять их в форма- 
те ХМГ. Данный механизм может быть использован для обработки ХМГ- 
цанных, полученных с сервера в ответ на запрос. (Эту задачу и возможные 
ее решения мы рассмотрим в главе 5.) 


Библиотека Ргоќоїуре 


Библиотека Ргоѓоїуре содержит функции общего назначения для программ 
аа Јауа$Ѕсгірі. Основное внимание разработчики библиотеки уделили расши- 
рению возможностей самого языка и поддержке объектов. Дополнительные 
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возможности языка формируют специфический стиль программирования. 
Несмотря на то что сам код Ргоѓоѓуре сложен для восприятия, так как он 
далек от стиля Јауа/С#, пользоваться самой библиотекой и другими биб- 
лиотеками, созданными на ее основе, очень просто. Ртофоуре молено рас- 
сматривать как библиотеку для разработчиков библиотек. При работе над 
Ајах-приложениями целесообразнее использовать библиотеки, созданные на 
основе Ргофобуре, чем сами базовые средства. Некоторые из этих библио- 
тек мы рассмотрим в следующем разделе. Здесь же ограничимся кратким 
обсуждением основных средств Ргоофуре. Это нужно для того, чтобы по- 
нять стиль кодирования и лучше разобраться в продуктах Ѕсгіріасшоиѕ, Кісо 
и Кибу оп Каі. 


Рго{обуре обеспечивает "расширение" одного объекта другим путем копи- 
рования всех свойств и методов родительского объекта в дочерний объект. 
Эту особенность лучше рассмотреть на конкретном примере. Предположим, 
что мы определили родительский класс Уећһісі1е. 


РапсНоп  Уеысе(пит\УТее6 тахбрееа){ 
1115. пштУееІ$=пит\ееІѕ; 
1115.пахЅрееа=тахЅрееа; 


} 

Мы хотим создать конкретный экземпляр этого класса, представляющий 
пассажирский поезд. В дочернем классе также нужны средства, представля- 
ющие число вагонов и механизм для изменения этого значения. Пользуясь 
обычными средствами ЈауаЅсгірі, мы можем написать следующий код: 

уаг раѕѕТгаіп=пеу Уеһіс1е(24, 100); 

раѕѕТгаіп.саггіавеСоипі= 12; 


раѕѕТтгаіп.ааасСаггіаве=ѓипсііоп()!{ 
1ћіѕ.саггіавеСоипё+ +; 


раѕѕТгаіп.гетоуеСаггіаве=ѓипсііоп(){ 
1115.саггіавеСоипі—; 


Итак, мы реализовали функциональные возможности, необходимые для 
объекта раѕѕТгаіп. Анализируя код с точки зрения специалиста по проек- 
тированию программ, можно сказать, что в нем практически ничего не сде- 
лано для формирования привычного всем объекта. Ргоѓоѓуре может помочь 
в решении подобных задач, определяя функции и расширяя с их помощью 
базовый объект. Определим расширенные возможности и оформим их в ви- 
де объекта. 


Ғопсіоп СаггіавеРиПег(саггіавеСоипї){ 
1ћіѕ.саггіареСоипі=саггіавеСоипі; 
11ѕ.ааасСаггіаве=ѓипсііоп(){ 
1һіѕ.саггіавеСоипі+ +; 


) 


(51$ . гепоуеСаггіасде= Ёипсііоп () { 
Ећ1іѕ.саггіадеСоџпі-; 


} 


136 Часть 1. Новый взгляд на Меб-приложение 


Затем объединим созданные средства с базовым объектом, обеспечив тре- 
буемое поведение. 


уаг рагепі=пем УМеһіс1е(24,100) ; 
уаг ехіепѕіоп=пем СаггіавеРиег(12); 
уаг раѕѕТгаіп= Објесі.ехіепа(рагепі, ехіепѕіоп); 


Заметьте, что родительский объект и объект расширения были опреде- 
лены независимо друг от друга, а лишь затем мы объединили их. Отноше- 
ние "родительский-дочерний" имеет место между экземплярами, а не между 
классами Уеһісіе и СаггіавеРиПег. Несмотря на то что данное решение 
не соответствует строго объектному подходу, весь код для конкретного дей- 
ствия, в нашем случае это движение вагонов, содержится в одном месте, а это 
упрощает его повторное использование. Если для небольших примеров подоб- 
ные приемы могут показаться излишними, то для масштабных приложений 
они оказываются очень полезными. 


Библиотека Ргоїоїуре также предоставляет средства поддержки Ајах — 
объект, позволяющий извлекать объект ХМГНИрВедие при работе на раз- 
личных браузерах. Тип Ајах.Кедиеѕі используется для передачи запросов 
серверу посредством объекта ХМІ.НёрКедиеѕі. 


уаг геа=пем Ајах.Веаиеѕі ('тураёа.хтю1'); 


В конструкторе используется стиль программирования, который часто встре- 
чается в библиотеках на базе Ргоѓоѓуре. В качестве необязательного парамет- 
ра указывается ассоциативный массив, позволяющий при необходимости за- 
давать различные установки. Для каждой из них предусмотрено значение по 
умолчанию, поэтому указывать надо только те параметры, которые необхо- 
димо изменить. В конструкторе Ајах.Кедиеѕі посредством ассоциативного 
массива можно указать передаваемые данные, параметры запроса, НТТР- 
метод и функцию обратного вызова. Пример вызова Ајах.Кедиеѕі, в резуль- 
тате которого переопределяются некоторые установки, приведен ниже. 
уаг теа=пем Ајах.Кедиеѕі( 
'тураа.хт!, 
{  теһоа: 'веї’, 
рагатеѓегѕ: { пате: 'ӣауе',ПКеѕ:'сһосоЈаѓе,гһибагЬь' }, 
опГоа4е4: Ғопсііоп(){ а1еті('"Іоааеа!'); }, 
опСотріІеѓе: Ғипсііоп(){ 
а1егї ('4опе! \п\п' +гед.ігапѕрогі. геѕропѕеТехі) ; 


} 

); 

Здесь посредством массива задаются четыре параметра. Поскольку в биб- 
лиотеке Ргоѓоѓуре по умолчанию используется метод роѕі, то метод веі при- 
ходится указывать явно. При использовании метода веї строка параметров 
присоединяется к ОКІ в первой строке запроса. Если бы мы использовали ме- 
тод роѕё, параметры помещались бы в тело запроса. Обработчики опГ.оа4деа 
и опСотр/!ее представляют собой функции обратного вызова, которые по- 
лучают управление тогда, когда свойство геайуЅїаїе объекта ХМЕНирВе- 
Чие5{ изменяется. Переменная гед. {гапзрогЕ в функции опСотшр!ее содер- 
жит ссылку на объект ХМІ.НќрКедиеѕі. 
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На основе Ајах.Кедиеѕі определен тип Ајах.ирӣаѓег, который загружа- 
ет фрагменты сценария, сгенерированные сервером, и выполняет их. Такой 
подход соответствует шаблону, ориентированному на сценарий. Мы подробно 
опишем его в главе 5. 

На этом мы завершаем краткий обзор библиотек, предназначенных для 
работы с различными браузерами. Набор библиотек, описанных здесь, дале- 
ко не полон, а библиотеки, приведенные в качестве примера, выбраны почти 
случайным образом. Как уже было сказано ранее, разработки в этой области 
ведутся достаточно интенсивно, и в ближайшее время можно ожидать появ- 
ления новых продуктов. В следующем разделе мы рассмотрим ряд компонен- 
тов, созданных на базе библиотек, рассмотренных ранее, и других библиотек. 


3.5.2. Компоненты и наборы компонентов 


Рассмотренные нами библиотеки обеспечивают поддержку различных бра- 
узеров на достаточно низком уровне. В частности, они позволяют работать 
с элементами РОМ и загружать ресурсы с сервера. Данные инструменты су- 
щественно упрощают создание пользовательских интерфейсов и логики при- 
ложений, но, несмотря на это, объем работы остается гораздо большим, по 
сравнению тем, который требуется при использовании З\ше, МЕС или О. 

По этой причине начали появляться компоненты и их наборы, ориентиро- 
ванные на работу с Ајах. В данном разделе мы рассмотрим некоторые из них. 
Как и прежде, мы ставим перед собой задачу не детально изучить, а лишь 
сформировать общее представление об этих компонентах. 


Ѕсгірїасиіоиѕ 


Библиотека компонентов Ѕсгіріасиоиѕ создана на базе библиотеки Ртгоѓоќуре, 
которую мы рассматривали в предыдущем разделе. На сегодняшний день 
Ѕсгірѓіасшоиѕ предоставляет лишь два набора функций, однако работа над 
данной библиотекой продолжается и разработчики планируют реализовать 
дополнительные возможности. 

Библиотека ЕЙесіѕ определяет визуальные анимационные эффекты, кото- 
рые молено применить к элементам РОМ для изменения их размеров, распо- 
ложения и прозрачности. Элементы в составе ЕЌесіѕ можно легко объединять 
друг с другом, реализуя вторичные эффекты. Например, вызов РиЁ() при- 
водит к тому, что размеры элемента увеличатся, в то же время он станет 
более прозрачным и наконец исчезнет с экрана. Еще одна базовая функция, 
РагаПеК), позволяет одновременно применить несколько эффектов. Биб- 
лиотека ЕЁес хорошо подходит для тех случаев, когда надо быстро реали- 
зовать визуальную обратную связь с пользователем. Пример ее применения 
будет приведен в главе 6. 

Для применения эффекта обычно достаточно вызвать конструктор и пе- 
редать ему в качестве параметра целевой элемент РОМ либо его идентифи- 
катор, например: 


пеу ЕЁес.5ПаеДомп(турОМЕ!етеп®; 
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В основе эффектов, реализованных в данной библиотеке, лежит принцип 
перемещения объектов с учетом временных параметров и событий. Разработ- 
чику предоставляется возможность использовать линейное и синусоидальное 
перемещение, а также качание и пульсацию. Для создания эффектов, опреде- 
ляемых пользователем, достаточно объединить основные эффекты и задать 
соответствующие параметры. Подробное их обсуждение выходит за рамки 
нашего краткого обзора. Пример применения эффектов Ѕсгіріасшоиѕ будет 
приведен в главе 6 при разработке системы оповещения. 


Набор Ѕсгірѓасџоиѕ также содержит библиотеку, обеспечивающую пе- 
ретаскивание объектов с помощью мыши. Эту возможность предоставляет 
класс ЅогѓіаБ1е. Он получает родительский элемент РОМ и обеспечивает пе- 
ретаскивание всех дочерних элементов. Параметры, передаваемые конструк- 
тору, позволяют задать обработчики обратного вызова, получающие управле- 
ние при движении или опускании объекта, типы дочерних элементов и список 
целевых объектов (т.е. элементов, которые могут принять перетаскиваемый 
объект в том случае, если пользователь отпустит кнопку мыши в тот момент, 
когда курсор находится над одним из них). В качестве параметров могут быть 
также указаны объекты Ейесі. Их действие проявляется при нажатии кнопки 
мыши, в процессе движения курсора либо при отпускании кнопки мыши. 


Нсо 

Подобно $Ѕсгірѓасџоиѕ, средства Кісо созданы на базе библиотеки Рго{обуре 
и также предоставляют настраиваемые эффекты и возможность перетаски- 
вания объектов. Кроме того, средствами Кісо поддерживается объект Ве- 
һауіог — фрагмент кода, применяемый к поддереву РОМ для реализации 
интерактивных функций. Примером применения Веһауіог может служить 
компонент Ассогііоп, который помещает набор элементов РОМ в заданную 
область и расширяет их по одному. (Компонент такого типа обычно называют 
полосой оийоок (оџіоок Баг), поскольку он получил популярность благодаря 
использованию в Місгоѕой Ои|оок.) 


Создадим простой компонент Кісо Ассогііоп. Нам потребуется родитель- 
ский элемент РОМ; каждый элемент, дочерний по отношению к нему, стано- 
вится отдельной панелью в составе области. Для каждой панели мы определя- 
ем элемент іу, содержащий еще два элемента у, которые задают заголовок 
и тело панели. 


<аіу іа='туАссогаіоп'> 

<аіу> 

<аіу> Оісйопагу Рећйпіііоп</іу> 

<аіу> 

<и> 

<11><Ь>п.</6>А рогіаБіе у\уша іпѕігитепі \ИВ а зта 
Кеубоаг апа ѓЁгее теѓа! гее4$ {һа зоипа мһеп аіг 15$ 
Ғогсеа раѕї Шеш Бу рІеаќеа БеПомѕ орегаїеа Бу һе 
рІауег. < /11> 

<1><6>а4].</6>Нау!шз [1014$ ог Бепаѕ 1іке {Не БеПомѕ 
оГ ап ассогаіоп: ассогӣіоп р|!еа{$; ассога1оп 6114$. < /11> 
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</и> 
</аіу> 
</аіу> 
<аіу> 
<аіу>А рісіџге</іу> 
<аіу> 
<пие ѕгс='топКкеу-ассогаіоп.јре'Х/іте> 
</аіу> 
</аіу> 
</аіу> 
Первая панель предоставляет статью словаря, определяющую слово ас- 
согаіоп (аккордеон), а вторая панель содержит изображение обезьяны, игра- 
юшей на аккордеоне (рис. 3.9). При воспроизведении без применения специ- 
альных средств эти два элемента размещаются один над другим. Однако мы 
присвоили элементу іу верхнего уровня идентификатор и можем передать 
его объекту Ассогӣіоп, код которого приведен ниже. 
уаг ошѓіег=$('птуАссогаіоп!) ; 
оцеег. $1У1е.\м1 1 ='320рх'; 
пеу Кісо.Ассогаіоп! 
ощег, 
{ рапе1Неіеһї:400, 
ехрапдеаВ2:'#909090', 
соПарзеаВ»2:'#404040', 
} 


); 

Первая строка выглядит несколько необычно. Символ $ допустим в име- 
ни переменной и, использованный так, как показано выше, ссылается на 
функцию в базовой библиотеке Ргобо{уре. Функция $() выполняет преоб- 
разование узлов РОМ подобно тому, как это делает функция библиотеки 
х хСеіЕІетепіВу1а(), рассмотренной в предыдущем разделе. Мы передаем 
конструктору объекта Ассог оп ссылку на преобразованный элемент ПОМ, 
а также массив параметров (подобный подход часто применяется в библиоте- 
ках, созданных на базе Ргоофуре). В данном случае параметры лишь задают 
стили для визуальных элементов компонента Ассогаіоп. При необходимости 
можно также указать функцию обратного вызова, которая получит управ- 
ление при открытии или закрытии панели. На рис. 3.9 показан эффект, по- 
лученный в результате применения объекта Ассогӣіоп к элементам РОМ. 
Объект Веһауіог предоставляет средства для создания" на базе популярных 
элементов разметки компонентов, пригодных для повторного использования, 
и обеспечивает разделение содержимого и интерактивного поведения. Раз- 
говор о принципах разработки пользовательского интерфейса средствами 
ЈауаЅсгірі мы продолжим в главе 4. 


Внимание заслуживает также средство Кісо, обеспечивающее поддержку 
запросов к серверу в стиле Ајах. Эти запросы реализуются посредством гло- 
бального объекта АјахЕпеіпе. Возможности объекта АдлахЕпеше не ограничи- 
ваются использованием ХМІ.НерКедиеѕі в различных браузерах. Он опреде- 
ляет ответ в формате ХМГ, состоящий из набора элементов геѕропѕе. Про- 
цессор Кісо автоматически декодирует их и обеспечивает поддержку двух 
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вазин Обычное отображение паю поитклииилиниеинининии Компонент Ассогаіот оеган 





Окбовагу репа Рангу Пе Пенон 
пл ропаЪБо міо 1паготоге мйћ а згоай КоуБоаг4 • п.л ролађю міо іазігитой | | 
ава (гоо пина] геол 1а! зош мен аіг з (огоо «ЕВ а ятлар коубоелі ерд (гое 
рал Шот Бу ріваіой Бобом орегацмі Бу ће рілуег. тоба) гробі Ша! зоиш) от аір | | 
+ а). Науіод (05 ог Беліз Шке (ће Ьейочѕ о( ап м ее ар Сосон | 
ассог4 ки: ассогдюор ріоаіїз; ассогбіюп Ы 5 г. тунда ч аи . | 
л ріашге Ње Ьедомз оѓ ап ассог ют: 


ассогіюп рен; ассогйіюп | 
Ыш» 


ана Щелчок мышью заня 


Рис. 3.9. Средства Веһахіог в составе Вісо позволяют оформлять обычные узлы ОРОМ 
в виде интерактивных компонентов. Для того чтобы сделать это, достаточно передать 
ссылку на узел верхнего уровня конструктору объекта Ве һауіог. В данном случае 
объектАссогаіо п применен к набору элементов 4 і у (его внешний вид, полученный без 
использования Ассогаіоп , показан слева). В результате формируется интерактивный 
компонент (он представлен справа), в котором по щелчку мыши открываются 

и закрываются отдельные панели 


типов ответа. Один из этих типов предполагает непосредственное обновле- 
ние элементов Ю0М, а второй — замену объектов ЈауаЅсгірі. Аналогичный 
механизм будет более подробно рассмотрен в разделе 5.5.3 при обсуждении 
взаимодействия клиента и сервера. Теперь перейдем к рассмотрению базовых 
средств, которые воздействуют на работу как клиента, так и сервера. 


3.5.3. Элементы, располагаемые на стороне сервера 


Средства, которые мы рассматривали до сих пор, выполняются исключи- 
тельно в среде браузера и могут обсуживаться любым МеБ-сервером как 
обычные ЈауаЅсгірі-файлы. Сейчас мы рассмотрим программные компонен- 
ты, которые располагаются на стороне сервера и динамически генерируют 
Јауа$сгірі-код или элементы разметки НТМГ. 

Эти компоненты гораздо сложнее рассмотренных ранее. Данные средства 
мы также не будем обсуждать подробно, а ограничимся лишь кратким рас- 
смотрением их возможностей. К программным средствам, располагаемым на 
стороне сервера, мы вернемся в главе 5. 


ОМА, ЈЅОМ-ВРС и ЅАЈАХ 


Начнем наш разговор о программных средствах, выполняющихся на стороне 
сервера, с обсуждения трех продуктов. Мы рассматриваем их совместно, по- 
скольку в них, несмотря на различие языков, применяется один и тот же 
подход. ЅАЈАХ работает с разными языками, которые используются для 
создания программ, выполняющихся на стороне сервера, а именно: РНР, 
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ру оп, Рей и Кибу. ОМК (Оиес М№еЬ Кетойп?) базируется на языке Ла- 
уа и вместо отдельных функций предоставляет методы объектов. Ј$0М-КРС 
(ТауазсирЕ Објесї Моѓайоп-Баѕеа Кетое Ргоседиге СаП$) поддерживает ра- 
боту с ЈауаЅсгірї для сервера, Ру оп, Кобу, Ре! и Јауа. 

Все три продукта позволяют создавать на стороне сервера объекты, мето- 
ды которых непосредственно доступны для запросов Ајах. В процессе работы 
Ајах-приложений часто используются функции, выполняющиеся на сервере 
и возвращающие результаты вычислений. Необходимость в подобных функ- 
циях возникает по разным причинам, например, с их помощью можно об- 
рабатывать данные, полученные из базы. Рассматриваемые здесь средства 
обеспечивают доступ к таким функциям или методам из программ, выпол- 
няющихся в среде браузера, в частности, предоставляют клиентскому коду 
программные средства, реализующие модель. 

Рассмотрим пример использования ЗАЛАХ для работы с РНР-функциями, 
определенными на сервере. В данном случае функция, выбранная в качестве 
примера, лишь возвращает строку текста. 


<?рһр 

Ғопсііоп ѕауНеПо(пате){ 

гешгп("НеПо! {$пате! Ајах іп Асііоп!!!!"); 
2> 


Для того чтобы представить эту функцию ЈауаЅсгірі-программе на 
клиентском уровне, нам надо импортировать в РНР-программу процессор 
ЗАЛАХ и вызвать функцию за]ах_ехроге. 

<?рһр 

геаиіге ('Ѕај ах.рһр') ; 

ѕајах_іпіё(); 

са) ах_ехроге ("ѕаунНе11о") ; 

?> 

После создания динамической У\еБ-страницы мы используем ЗАЛАХ для 
генерации ЈауаЅсгірі-оболочки экспортируемых функций. Сгенерированный 
код создает функцию ЈауаЅсгірї, заголовок которой идентичен функции на 
стороне сервера. 


<ѕсгірі їуре='ехї/јауаѕсгірі'> 
<? 


ѕајах ѕһом јаүаѕсгірі(); 
?> 


аІегі(ѕауНеПо(" Оауе")); 


</ѕсгірі> 


При вызове функции ѕауНеПо ("Оауе") в среде браузера сгенерирован- 
ный Јауа$сгірі-код формирует Ајах-запрос серверу, функция выполняется 
на стороне сервера и результаты возвращаются в составе НТТР-ответа. При 
разборе ответа извлекается возвращаемое значение и передается Јауа$Ѕсгірі- 
программе. Разработчику не приходится непосредственно применять техно- 
логии Ајах; все необходимые действия скрыты от него и выполняются биб- 
лиотеками ЗАЛАХ. 
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Все три рассматриваемых здесь продукта осуществляют низкоуровневое 
отображение функций на стороне сервера в клиентские вызовы Ајах. Они 
автоматизируют рутинные операции, требующие много времени и усилий, но 
при их использовании возникает опасность доступа к серверной логике из 
Интернета. Этот вопрос мы подробнее рассмотрим в главе 5. 

Остальные средства, рассматриваемые в этом разделе, действуют более 
сложным образом — они генерируют уровни пользовательского интерфейса 
для моделей, объявленных на сервере. Несмотря на использование техноло- 
гий Ајах, они следуют своим собственным программным моделям. В резуль- 
тате работа с этими продуктами несколько отличается от написания универ- 
сальных Ајах-приложений. 


Васкбаѕе 


Васкбаѕе РгеземаНоп Ѕегуег предоставляет обширный набор компонентов, 
связываемых в процессе работы с ХМГ-дескрипторами. Они включаются 
в НТМГ-документы, сгенерированные сервером. Общий принцип работы ана- 
логичен работе компонентов Е со Веһауіог, за исключением того, что вме- 
сто НТМІ.-дескрипторов Васкбаѕе использует для обозначения компонен- 
тов пользовательского интерфейса произвольно задаваемый набор ХНТМТ- 
элементов. 

ВаскБаѕе предоставляет реализацию серверных компонентов для Јауа и 
„МЕТ и распространяется на коммерческой основе. 


Еспо2 


Продукт Мех{Арр Есһо2 представляет собой процессор на базе Јауа, который 
генерирует богатые компоненты пользовательского интерфейса, объявленные 
на сервере. При загрузке в браузер компоненты работают автономно; взаи- 
модействие с пользователями обеспечивает сценарий ЈауаЅсгірі. При необхо- 
димости они обращаются к серверу, используя очередь запросов, подобную 
той, которая применяется Кісо. 

Есһо2 считается решением на базе Ајах. Для работы с ним не требуется 
знание НТМГ, ЈауаЅсгірі или С5$5, если, конечно, пользователь не собирается 
расширять набор доступных компонентов. В большинстве случаев разработ- 
ка клиентских приложений осуществляется с использованием только средств 
Јауа. Исходные коды Есһо2 открыты. Допускается применение данного про- 
дукта в коммерческих целях. 


ВиБу оп Вай$ 


Кобу оп КаП5 представляет собой набор средств для разработки приложений, 
написанных на языке программирования Кобу. В рамках данного продукта 
объединены решения для отображения серверных объектов в базу данных 
и представления содержимого с помощью шаблонов. В основном он соответ- 
ствует архитектуре "модель-представление-контроллер" для сервера, кото- 
рая была описана в разделе 3.4. Кибу оп Каі обеспечивает быструю раз- 
работку как простых \№е6-узлов, так и средней сложности. Генерация ко- 
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пов общего назначения осуществляется автоматически. Количество устано- 
вок, необходимых для получения работающего приложения, также сведе- 
но к минимуму. 

Последние версии КаП$ обеспечивают поддержку Ајах посредством биб- 
лиотеки Ргоѓоѓуре. Ргоофуре и Каіѕ естественным образом сочетаются друг 
с другом, поскольку ЈауаЅсгірі-код для Ргоѓоѓуре сгенерирован из программ 
Кобу и стили программирования совпадают. Как и в случае с Есһо2, Каіѕ не 
требует знания Ајах-технологий, в частности Јауа$Ѕсгірі, однако разработчик, 
знакомый с этим языком, может расширить средства поддержки Адах. 

На этом мы заканчиваем обзор продуктов независимых производителей 
для Ајах. Как уже было сказано ранее, работа над большинством рассмот- 
ренных здесь средств продолжается. 

Разработчики многих библиотек придерживаются собственного стиля 
программирования, поэтому при написании примеров для данной книги мы 
старались передать характерные черты технологий Ајах и в то же время 
избежать глубокого изучения конкретных продуктов. Некоторые из рассмот- 
ренных здесь средств будут встречаться и далее в книге. 


3.6. Резюме 


В данной главе реструктуризация рассматривалась как средство для повыше- 
ния качества кода и обеспечения дополнительной степени гибкости программ. 
Мы начали с того, что использовали реструктуризацию для упрощения до- 
ступа к объекту ХМПНИрКедие$. Был рассмотрен ряд образов разработки, 
которые можно применять при работе с Ајах для решения проблем, типичных 
для различных задач программирования. Образы разработки представляют 
собой полуформальные средства представления знаний разработчиков, кото- 
рые решали задачи определенных типов. Они могут быть использованы при 
реструктуризации, преследующей определенные цели. 

Образы Еаса4е и Адарег предоставляют удобные способы устранения 
различий между разными реализациями. В Ајах-приложениях эти образы 
могут быть использованы для создания дополнительного уровня кода, скры- 
вающего различия браузеров. Следует заметить, что несоответствие браузе- 
ров является.постоянным источником проблем при работе с ЈауаЅсгірї. 

Обзегуег — это гибкий образ для работы с системами, управляемыми со- 
бытиями. Мы вернемся к его использованию в главе 4 при рассмотрении 
уровней пользовательского интерфейса приложения. Будучи использован- 
ным совместно с Соттапа, предоставляющим удобный способ инкапсуляции 
действий пользователя, Обзегуег может быть применен для поддержки ввода 
данных и отмены выполненных действий. Как вы увидите в главе 5, образ 
разработки Соттапа также находит применение в организации взаимодей- 
ствия клиента и сервера. 

Образ разработки Зшеоп обеспечивает доступ к конкретным ресурсам. 
В Ајах этот образ часто применяется для управления обменом по сети. Дан- 
ный вопрос также будет обсуждаться в главе 5. 
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В этой главе мы подробно обсудили архитектуру "модель-представление- 
контроллер", хорошо зарекомендовавшую себя в различных областях (в том 
числе и при создании программ для работы в Интернете). В частности, дан- 
ную архитектуру удобно использовать для создания М№еБЬ-приложений. Мы 
говорили о том, каким образом МУС способствует повышению степени гиб- 
кости программ, выполняемых на стороне сервера, в том числе обсудили важ- 
ность уровня абстрактных данных и шаблонов. 

Пример программного обеспечения интерактивного магазина продемон- 
стрировал совместное применение образов разработки и реструктуризации. 
С первого раза трудно создать совершенный код, поэтому реструктуриза- 
ция является сложным, но необходимым этапом работы, призванным обеспе- 
чить преимущества образов разработки для конкретной программы. Конеч- 
ный результат существенно отличался от программы, полученной на первом 
этапе разработки. 

И наконец, мы рассмотрели библиотеки и компоненты независимых про- 
изводителей. Они также могут быть применены для упорядочения кода, со- 
здаваемого в рамках Ајах-проектов. В настоящее время доступны средства, 
которые могут быть использованы при решении различных задач: от форми- 
рования оболочек, скрывающих различия между браузерами, до программ- 
ных решений, включающих создание клиентского и серверного кода. Кроме 
того, в главе описано несколько наиболее популярных продуктов, и к неко- 
торым из них мы еще вернемся в этой книге. 


В следующих двух главах мы применим полученные знания о реструк- 
туризации и образах разработки при создании клиентских программ Ајах 
и систем, предполагающих взаимодействие клиента и сервера. Эти примеры 
подскажут вам способы решения задач, с которыми вы наверняка столкне- 
тесь при разработке сложных М№еб-приложений. 


3.7. Ресурсы 


Мартин Фаулер (Магііп Ео\ег), а также его соавторы Кент Бек (Кеши Веск), 
Джон Брант (Јоһп Вгап®, Вильям Опдайк (“Шат Орауке) и Дон Роберте 
(Ооп Кобегіѕ) написали хорошее руководство по реструктуризации: Кеасюг- 
те: Ітргоуіп= ше ПРеѕісп оѓ Ехіѕійпе Соае (Аааіѕоп-МеѕІеу РгоҒеѕѕіопа1, 1999). 

Эрик Гамма (Егісһ Сатта), Ричард Хелм (Кісһага Не), Ральф Джон- 
сон (Каірһ Јоһпѕоп) и Джон Влиссидс (Јоһп М1іѕ5ійеѕ), известные как "ко- 
манда четырех", написали книгу Реѕіёп Рапегих (Айаіѕоп-МеѕІеу РгоЁез- 
ѕіопаї, 1995), которую высоко оценили многие разработчики программно- 
го обеспечения. 

Впоследствии Эрик Гамма занялся архитектурой интегрированной среды 
разработки Есірѕе (подробнее о ней речь пойдет в приложении А). С текстом 
интервью, в котором обсуждались ЕсПрзе и образы разработки, можно озна- 
комиться по адресу һіїір://уу№.агііта.сот/Іејауа/агііс1еѕ/ваттаар.һіті. 

Майкл Мехемофф (Місһаеі Маһотоћ) поддерживает МеБ-узел, посвя- 
щенный образам разработки для Ајах (ВИр://м\\.а]ахра(Иегиз.ог®). 


Часть П 


Основные подходы к 
разработке приложений 


Теперь, когда вы имеете общее представление об Ајах, пора рассмотреть 
основные способы разработки приложений. Наша задача — создать работо- 
способную, надежную программу, простую в сопровождении, которая предо- 
ставляла бы пользователю удобный интерфейс. В главе 4 мы рассмотрим 
вопросы создания клиентского кода и постараемся добиться, чтобы средства 
С$$, НТМЕ и ЈауаЅсгірі как можно меньше зависели друг от друга. Глава 5 
посвящена взаимодействию клиента и сервера. 





* Организация сложного кода 
пользовательского интерфейса 


• Использование образа разработки 
"модель-представление-контроллер" 
с ЈауаЅсгірі-кодом 


• Разделение представления и логики 
для сопровождаемого кода 


" Создание гибкого режима обработки событий 
• Генерация пользовательского интерфейса 
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В главах І и 2 мы рассмотрели основные принципы Ајах как с точки 
зрения практичности программы, так и с позиции используемых техноло- 
гий. В главе 3 речь шла о создании кода, пригодного для сопровождения. 
Чтобы сформировать такой код, мы использовали реструктуризацию и об- 
разы разработки. Для простых примеров, которые приводились в книге, та- 
кие сложные действия могли показаться излишними, однако, изучив глубже 
принципы программирования Ајах, вы убедитесь, что данные инструменты 
крайне необходимы. 

В этой и следующей главах мы подробно обсудим вопросы, относящи- 
еся к созданию сложного масштабируемого клиента Ајах, и принципы ар- 
хитектуры, следование которым позволяет выполнить эту работу. Данная 
глава посвящена созданию клиентского кода, соответствующего архитекту- 
ре "модель-представление-контроллер", которая была рассмотрена в главе 3. 
Мы также будем использовать Обзегуег и некоторые другие образы разра- 
ботки. В главе 5 речь пойдет о взаимодействии клиента и сервера. 


4.1. Разновидности архитектуры МУС 


В главе 3 мы рассмотрели пример реструктуризации в соответствии с принци- 
пами МУС простого приложения, предназначенного для интерактивного ма- 
газина. Большинство разработчиков считают моделью информацию на серве- 
ре и программы ее поддержки, представлением — сгенерированные данные, 
передаваемые клиенту, а контроллером — сервлет или набор №еб-страниц, 
определяющих порядок работы приложения. 

Однако первоначально архитектура МУС была ориентирована на про- 
граммы, предназначенные для настольных систем. В Ајах-приложениях су- 
ществует несколько вариантов ее применения. Рассмотрим эти варианты бо- 
лее подробно. 


4.1.1. Применение архитектуры МҮҰС к программам 
различных уровней 


Классическая архитектура "модель-представление-контроллер" в примене- 
нии к \№Б описывает приложение лишь в общих чертах. Так, сгенериро- 
ванный поток данных является представлением, ССІ-сценарий или сервлет 
выполняет функции контроллера и т.д. 

При разработке приложений для настольной системы архитектура МУС 
часто применяется в меньших масштабах. В соответствии ‚с этой архитекту- 
рой могут создаваться даже такие простые компоненты, как кнопка. В этом 
случае элементы МУС можно описать следующим образом. 


• Внутреннее представление состояний кнопки — например, нажата, отпу- 
щена, неактивна, — это модель. В компонентах Ајах она обычно реализу- 
ется посредством объекта Јауа$сгірї. 


. Изображение компонента на экране (в случае пользовательского ин- 
терфейса он может быть сформирован из нескольких узлов РОМ), 


Глава 4. Иер-страница в роли приложения 149 


учитывающее различные состояния, с подсветкой и подсказкой, 
это представление. 


• Код, имеющий доступ к состоянию и позволяющий изменять изображение 
на экране, — это контроллер. Контроллером также являются обработчики 
событий (например, щелчок мышью на кнопке), но этот контроллер не 
имеет отношения к описанным выше представлению и модели. 


Рассмотрим эти вопросы подробнее. Кнопка сама по себе демонстриру- 
ет крайне ограниченные варианты поведения. Ее состояние и внешний вид 
также изменяются крайне незначительно. Следовательно, применение к ней 
архитектуры МУС не даст практически никакого эффекта. Если мы рассмот- 
рим более сложный компонент, например дерево или таблицу, то увидим, что 
он достаточно сложен для того, чтобы всерьез обсуждать вопрос использо- 
вания МУС. 

На рис. 4.1 условно показана архитектура МУС, применяемая к компо- 
ненту, реализующему древовидную структуру. Модель состоит из узлов де- 
рева, каждый из которых имеет набор дочерних узлов. Для узла определе- 
ны открытое и закрытое состояние. Каждый узел ссылается на некоторый 
бизнес-объект, представляющий файлы и каталоги. Представление состоит 
из пиктограмм и линий, расположенных на холсте. Контроллер поддержива- 
ет события, например, открытие и закрытие узла, отображение контекстного 
меню, и может инициировать обновление графического представления опре- 
деленных узлов. В этом случае представление изменяет свое состояние. 

Таким образом, архитектура МУС не обязательно должна быть привяза- 
на к знакомому всем сценарию У№-сервера. Обратимся к У№-браузеру. 


4.1.2. Применение архитектуры МҰС к объектам, 
присутствующим в среде браузера 


До сих пор мы обращали внимание лишь на отдельные детали приложения. 
Но мы также можем целиком рассмотреть ЈауаЅсгірі-приложение, доставля- 
емое браузеру в начале работы. Оно поддается структурированию в соот- 
ветствии с архитектурой МУС и позволяет тем самым добиться разделения 
функций и ответственности между различными подсистемами. 

На уровне браузера модель состоит из бизнес-объектов, представление — 
это страница, управляемая с помощью программы, а контроллером явля- 
ется сочетание всех обработчиков событий, связывающее пользовательский 
интерфейс с бизнес-объектами. На рис. 4.2 иллюстрируется использование 
МУС на этом уровне. Такой вариант применения архитектуры МУС, навер- 
ное, наиболее важен для разработчиков Ајах-приложений, так как богатое 
клиентское приложение Ајах естественным образом укладывается в ее рамки. 
Ниже мы рассмотрим данный вариант использования архитектуры "модель- 
представление-контроллер" и выгоды от его применения. 

Если вы вспомните традиционное применение МУС для создания сервер- 
ных программ (см. главу 3), то легко сделаете вывод, что в типичном Ајах- 
приложении можно выделить по крайней мере три уровня использования 
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Рис. 4.1. Архитектура "модель-представление-контроллер" 

в применении к объекту, представляющему дерево. 
Представление состоит из элементов, отображаемых на экране 
и соответствующих элементам РОМ. Моделью древовидной 
структуры является набор объектов ЈауаЅсгірї. Контроллер 
обеспечивает взаимодействие модели и представления 





Рис. 4.2. Архитектура "модель-представление-контроллер", применяемая 
к клиентской части приложения Ајах. На этом уровне контроллером является 
ЈамаЅсгірї-код, связывающий пользовательский интерфейс с бизнес-объектами 
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Рис. 4.3. Вложенная архитектура ММС 


данной архитектуры. В жизненном цикле приложения средства МУС каждо- 
го уровня выполняют различные функции, но все они служат формированию 
понятного, хорошо организованного кода. На рис. 4.3 показано, как элемен- 
ты МУС, присутствующие на различных уровнях, сочетаются друг с другом 
в рамках архитектуры приложения. 

Как же данный подход влияет на нашу работу над кодом? В следую- 
щих разделах мы подробно рассмотрим использование МУС для определения 
структуры ЈауаЅсгірі-приложения, особенности написания кода и преимуще- 
ства, получаемые при этом. Начнем наше рассмотрение с представления. 


4.2. Представление в составе Ајах-приложения 


С точки зрения ЈауаЅсгірі-приложения, доставленного браузеру в начале 
работы, представлением является отображаемая страница, состоящая из 
элементов РОМ, основой для воспроизведения которых является НТМГ- 
разметка или действия программы. О принципах программной обработки 
элементов РОМ см. в главе 2. 
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Согласно принципам архитектуры "модель-представление-контроллер" 
представление выполняет две основные функции. Во-первых, предоставля- 
ет визуальный интерфейс, посредством которого пользователь может выпол- 
нять действия и вызывать тем самым события, обрабатываемые контрол- 
лером. Во-вторых, оно обновляет само себя в соответствии с изменениями 
модели. Информацию об этих изменениях также предоставляет контроллер. 

Если над приложением работает команда разработчиков, то представле- 
ние становится той областью, где сталкиваются различные интересы. Интер- 
активные средства Ајах-интерфейса определяют не только программисты, 
но также дизайнеры и художники. Предлагать дизайнеру написать код или 
привлекать программиста к рисованию — явно бесполезная затея. Даже если 
кто-либо имеет две специальности и выступает при работе над приложени- 
ем в двух разных ролях, желательно, чтобы в каждый момент времени он 
занимался одной конкретной задачей. 


Обсуждая применение архитектуры МУС к программам, расположенным 
на сервере, мы показали, как "сплетаются" код и представление и что надо 
сделать, чтобы разделить их. Можно ли решить эту задачу для информации, 
имеющейся в браузере? 

В главе 3 мы описывали действия по структурированию Меб-страниц, 
в результате которых коды С$$, НТМЕ и ЈауаЅсгірі располагались в раз- 
ных файлах. Если рассматривать лишь саму УеБ-страницу, такое разделе- 
ние соответствует принципам МУС. Здесь таблицы стилей выступают в роли 
представления, а НТМІ/рОМ являются моделью. В данном случае сред- 
ства воспроизведения страницы являются "черным ящиком", а коды НТМІ. 
и С55 должны рассматриваться как представление. Желательно, чтобы они 
поддерживались независимо друг от друга. Поместив ЈауаЅсгірі-код в отдель- 
ный файл, мы уже сделаем существенный шаг по пути разделения функций 
дизайнеров и программистов. Однако это только начало. 


4.2.1. Отделение логики от представления 


Даже если ЈауаЅсгірі-код находится в отдельном файле, представление и ло- 
гика (модель и контроллер) вполне могут оказаться перепутанными. Предпо- 
ложим, что мы создали встроенный обработчик события на языке ЈауаЅсгірі. 


<аіу с1азз='иироВаНоп' 
опсіск= ітрогіРаѓа("Яаѓаѓееӣз.хті", гауехох.уаше);'/> 

Сделав это, мы "жестко" закодировали бизнес-логику в составе представ- 
ления. Что такое ӣаѓќаѓеей3? Как обрабатывать значение шуехох. уаше? 
Почему функции ітрогіраѓа () передаются два параметра и каково их на- 
значение? Дизайнер должен знать об этом. 

Функция ппрогОаца() относится к бизнес-логике. Согласно принципам 
МУС, представление и модель не должны непосредственно взаимодейство- 
вать друг с другом, поэтому они разделены дополнительным уровнем. Пред- 
положим, что мы переписали элемент Чу следующим образом: 
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<аіу с1аз5='1трогЕВи оп' опс1іск= 'ітрогїі Ееейраѓа()'/> 


Теперь, если мы определим обработчик события так, как показано ниже, 


параметры будут инкапсулированы не в анонимном обработчике, а в функции 
ітрогіЕееараѓа(). 


Ғопсйоп ітрогіЕееараѓа(еуепі)! 

ітрогіЮаѓа("аа(аѓееӣз.хті", туѓехірох.уаіие); 

} 

Такой подход позволяет использовать обработчик в любом месте про- 
граммы, разделяя функциональные возможности и следуя принципу ОКУ 
(напомним, что данная аббревиатура означает "доп" гереаі уоигзеЁ! — 
не повторяться). 

Контроллер пока еще остается встроенным в НТМГ-код, что может стать 
источником проблем в больших приложениях. 

Для того чтобы разделить контроллер и представление, мы присоединим 
обработчик события программными средствами. Вместо того чтобы реализо- 
вывать встроенный обработчик, мы укажем некоторый маркер, который впо- 
следствии будет извлечен программой. Маркеры могут быть разными. В част- 
ности, можно указать уникальный идентификатор и задавать обработчики 
для каждого элемента. НТМІ-элемент будет переписан следующим образом: 


<аіу с1аѕѕ5='ітрогіВийоп' іа='аѓіаЕееаВіп'> 


Приведенный ниже код надо включить в функцию обратного вызова жіп- 
ож, опіоаа. 


уаг ағВіп=іоситепі.веіЕіетепіВуІа('аѓаЕееаВіл) ; 
ағВіл.опсіск=ітрогіЕееараќѓа; 


Если мы хотим связать определенные действия с несколькими событиями, 
нам понадобится маркер, не являющийся уникальным. Для этой цели можно 
использовать класс С$$. 


Добавление обработчиков событий с помощью С$$ 


Рассмотрим простой пример, в котором события мыши связываются с кла- 
вишами виртуального музыкального инструмента. В листинге 4.1 мы опре- 
делили простую страницу. В составе дескрипторов стили не указаны. 


Листинг 4.1. Файл тиѕіса1. В] 

<!РОСТУРЕ Һёеті РОВШТС "-//МЗС//ОТЬ ХНТМІ 1.0 

бЕгісЕ/ /ЕМ" 

"ҺЕбр: / /утт. 3 . ога/ ТК/хһет11/рТтр/хһітм11-ѕігісі.ака" > 

<ВЕт1> <Беа@> <біб1е>Кеуроагӣ</біё1е> <1іпк ге1='ѕіу1еѕһҺееі' 
Суре='бехі/еѕѕ’ БхеЕ='маз1са1.с$$'/> <всгірі 
Суре='Еехё/јауаѕсгірі' зѕгс= 'тиѕіса1.јѕ'Х/ѕсгірі> <ѕсгірі 
Суре= 'ёехі/јауаѕсгірё'> м1паом.оп1оаЯ=азз1апКеу$; </ѕсгірі> 














</ћҺеаа> 

<Боау> 

<аіу іа='Кеуроага'! с1аѕѕ= 'тиѕіса1Кеуѕ'> 
<! О — Клавиши на "клавиатуре" -—> 


<аіу с1аѕѕ='о пиѕіса1Виёёоп'Х/аіу> 
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<дӢіу с1 


азз='хе тоиѕіса1Виёёоп'х/аіу> 


<Ч1у с1аѕѕ=' ті шиз1са1Ваебоп ' Х/Я1\> 
<Ч1у с1аѕѕ=' Ға шаз1са1Вае бот ' х/91\> 
<Ч1у с1аѕѕ='ѕо шиз1са1Ваебоп' х/91\> 
<Ч1у с1аѕѕ='1а ютоѕіса1Воиёёоп'х/аіу> 
<аӢіу с1аѕѕ='Еі ютиѕіса1Виёёоп'х/аіу> 
<аӢіу с1аѕѕ='до тиѕіса1Виёёоп'х/аіу> 





</аіу> <аіу 1іа='сопѕо1е' с1аѕѕ='сопѕо1е'> </аіу> </ройу> 
</ҺЕт1> 


В 











декларации ПОСТУРЕ МЫ указали определение гісі л 


шь для того, 





чтобы показать, что такое решение возможно. Элементу Кеуроага присвоен 


уникальный идентификатор, но в д 


НЫМ 





общий д 


ству 
































ескрипторах 
клавишам, идентификатор отсут 
представляющих клавиши 0, указан 





А 
гствует. Заметьте, 
ы два класса. Кл 





соответствующих отдель- 





























Листинг 4.2. Файлииѕіса1 .еѕѕ 
боду { 





раскогооџпа-со1ог: мһііе; 
.юиѕіса1Кеуѕ { 

раскогооџпа-со1ог: #ЁҒеоао; 

рогӣӢег: ѕо1іа пагооп 2рх; 

міаєһ: 536рх; 

Һеідһёе: 68рх; 

сор: 24рх; 

1еЕЕ: 24рх; 

пагодіп: 4рх; 

роѕіёіоп: абзо1аее; 
оуекЕТом: аціо; 
.поѕіса1Виёёоп { 

рогаег: ѕо11іа пауу 1рх; 

міаєһ: 60рх; 

Һеідһі: 60рх; 

роѕіёіоп: ге1аііуе; 

пагодіп: 2рх; 

Ғ1оаі: Іей; 





.ао{ раскаогоопа-со1ог: геа; 
.ге{ раскагоопа-со1ог: огапде; 
.01{ раскогоџпа-со1ог: уе11ом; 
.Еа{ Баскагоипа-со1отг: агееп; 
.ѕо{ Баскагоипа-со1ог: Б]1ае; 
.1а{ раскаогоопа-со1ог: іпаідо; 
.с1{ раскогоџпа-со1ог: уіо1её; 
} аіу.сопѕо1е{ 
Ғопі-Ғамі1у: акіа1, Һе1уеііса; 


Ғопё-ѕіле: 16рх; 

со1ог: пауу; 
раскагооџпа-со1ог: мһііе; 
рогаег: ѕо1іа пауу 2рх; 
міаёһ: 536рх; 


} 


ля всех клавиш, а второй к 
ющие стили определены раздельно в файлеп 


} 





} 


асс позволя 








что для элементов, 
асс шиѕіса1Виёбоп — 


ет различать их. Соответ- 








} 
} 


} 


1151са1.е58 








листинг 4.2). 
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Һеідһі: 320рх; 

Сор: 106рх; 

Іе#ё: 24рх; 

пагоіп: 4рх; 
роѕіііоп: абзо1Тасе; 
оуегЕ1ои: асбо; 





Стиль тиѕісаІВийоп определяет свойства, общие для всех клавиш. Вто- 


рой стиль лишь задает цвет клавиши. Заметьте, что позиция элемента верх- 
него уровня непосредственно определена в пикселях, а для клавиш мы задаем 
свойство Ноа{. В результате такого решения вступают в действие средства 


компоновки, встроенные в браузер, и клавиши размещаются вдоль горизон- 
тальной линии. 


Связывание обработчиков событий с элементами 


Јауа$сгірі-код, показанный в листинге 4.3, связывает обработчики событий 
с клавишами. 


Листинг4.3. Файлтюиѕіса1, јѕ 
Ғопсёіоп аѕѕісдпКеуѕ () { 
// Получение родительского элемента іу 
уаг КеуроагЯ=Чосцтепе . чесЕ1етепЕВУТА ("КеуБоага") ; 




















// речисление дочерних элементов 
уар Кеуз=КеуБоатга. чесЕ1егтаепеВуТадМаме ("а1у"); 





1Е (Кеуз){ 
Ғоү (уаг 1=0;і<Кеуѕ.1еподіһ;і++) { 

уаг Кеу=Ккеуѕ [1]; 

уаг с1аѕѕеѕ= (кеу.с1аззМаме).$р11® (" М: 

1Е (с1аѕѕеѕ && с1аѕѕеѕ.1еподёһь=2 
55 

с1аззез [1] == "паз1са1Ваев оп") { 

уаг поёе=с1аѕѕеѕ[0]; 
// Добавление атрибута 
Кеу.побе=посе; 
Кеу .оптоцзеоуег=р1ауМоее; 


} 





] 
} 

} ГоросЕ1ой р1ауМосе (еуепі) { 
// Извлечение дополнительного атрибута 
уаг поёе=ёһіѕ.побе; 
уар 

сопзо1е=аосимепте . чесЕ1етепЕВуТаА ("сопзо1е") ; 
1Е (побе && сопзотТе) { 

сопѕо1е.іппекнНтТмМі+=поёе+" . "; 


7 
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Функция аѕѕівп Кеуѕ () вызывается в составе обработчика уіпіоу. опІоаа. 
(Если определить жіпаӢож.опіоаа непосредственно, это ограничит перено- 
симость приложения.) Мы находим элемент Кеубоага по его уникальному 
идентификатору, а затем используем функцию еЕететВуТа» Маше () для 
перебора всех дочерних элементов Чу. Для этого необходимо иметь пред- 
ставление о структуре страницы, зато дизайнер получает возможность пе- 
ремещать элементы іу, соответствующие клавишам, любым удобным для 
него способом. 

Каждый элемент РОМ, представляющий клавишу, возвращает посред- 
ством свойства сІаѕ$ Мате строку символов. Для преобразования строки 
в массив мы используем встроенную функцию Ѕїгіпе.ѕр11ї, после чего про- 
веряем, принадлежит ли элемент классу тиз1са1ВиИоп. Затем мы читаем 
оставшуюся часть строки, которая представляет ноту, и связываем ее с узлом 
РОМ посредством дополнительного свойства. Это свойство будет прочитано 
в обработчике события. 

Воспроизводить звуки посредством Меб-браузера затруднительно, поэто- 
му в данном примере мы лишь отображаем ноты на "консоли" под изобра- 
жением клавиатуры. На рис. 4.4 показано действие клавиатуры. В данном 
случае нам удалось довольно удачно разделить роли. Если дизайнер пере- 
местит элементы ПІУ, соответствующие клавиатуре и консоли, в другое ме- 
сто документа, приложение будет по-прежнему работать и риск случайно 
изменить логику обработки событий сводится к минимуму. По сути, НТМГ- 
страница выполняет функции шаблона, в состав которого мы включаем пе- 
ременные и логику выполнения. Это позволяет отделить логику от представ- 
ления. Мы обработали данный пример вручную, чтобы детально продемон- 
стрировать наши действия. При работе над реальным приложением целесо- 
образно использовать для получения того же результата библиотеки незави- 
симых производителей. 


Библиотека Кісо (һір://уүү.орепгісо.оге/) поддерживает объекты 
Веһауіог и позволяет реализовать интерактивные возможности поддерева 
РОМ. Компонент Кісо Ассогӣіоп рассматривался в разделе 3.5.2. Разделить 
элементы разметки НТМГ и интерактивные функции можно посредством 
библиотеки Верамюоиг (см. ссылку в конце данной главы), созданной Беном 
Ноланом (Веп Мо!ап). Данная библиотека позволяет связывать с элементами 
РОМ код, предназначенный для обработки событий, используя селекторы 
С$5 (см. главу 2). В предыдущем примере функция аѕѕівпКеуѕ () выбирала 
элемент с идентификатором Кеубоага, а затем извлекала все содержащиеся 
в нем элементы Чу. Используя селектор, мы можем выразить то же правило 
следующим образом: 


•Кеуроага @1у 


Применяя С$5, мы можем связать стиль со всеми элементами Кеубоага 
посредством данного селектора. Библиотека Веһауіоиг.јѕ также позволяет 
использовать обработчики событий следующим образом: 

уаг тугиеѕ={ “КеуБоага аіу' 


Ғипсіїоп(Кеу){ 
уаг с1а55еѕ5=(Кеу.с1аѕѕ Мате).5р11ї(" "); 
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ют [О Рид ҒА 
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Рис. 4.4. Клавиатура "музыкального инструмента", представленная 
посредством браузера. Закрашенные области в верхней части окна 
соответствуют различным нотам. При перемещении указателя мыши 
над "клавишами" названия нот отображаются в области, расположенной 
ниже и выполняющей функции консоли 


1Е (с1аѕѕеѕ && с1аѕѕеѕ.1еподёһ>=2 
&& 
с1аѕѕеѕ [1] == 'паз1са1Ваееоп') { 
уар поёе=с1Іаѕѕеѕ [0]; 
Кеу .побе=поЕе; 
Кеу . оптоцѕеоуег=р1аућоёе; 


} 

}; 

Большая часть логики совпадает с предыдущим примером, но использо- 
вание селекторов С55 представляет собой удобную альтернативу рассмотрен- 
ному ранее решению, в особенности в тех случаях, когда надо одновременно 
реализовать несколько вариантов поведения. 

В данном случае логика отделена от представления, однако, как мы вско- 
Ре увидим, остается возможность включения средств представления в со- 
став логики. 


4.2.2. Отделение представления отлогики 


На данный момент мы добились того, что дизайнер может изменять внеш- 
ний вид страницы, не затрагивая кода. Однако при существующем положе- 
нии дел функционирование приложения еще существенно зависит от НТМТ- 
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документа. В частности, в НТМГ-коде задается порядок следования клавиш. 
Каждая клавиша определена посредством отдельного дескриптора Піу, и ди- 
зайнер может случайно удалить некоторые из них. 

Если расположение клавиш — вопрос функционирования приложения, 
а не его оформления, то имеет смысл генерировать некоторые элементы РОМ 
в программе, вместо того, чтобы объявлять их посредством НТМТ-кода. Кро- 
ме того, нам может потребоваться, чтобы на странице располагалось несколь- 
ко компонентов одного типа. Например, если вы не хотите, чтобы дизайнер 
изменял порядок следования клавиш на клавиатуре, вы можете поставить 
условие, что клавиши будут включаться при выполнении инициализацион- 
ного кода. В листинге 4.4 представлен модифицированный ЈауаЅсгірі-файл, 
соответствующий указанным требованиям. 


Листинг 4.4. Файл тиѕіса! ауп Кеуѕ. јѕ 
уаг посез=пем Аггау ( "ао", "ге", "мі", " Ға", "ѕо", "1а", "Еі", "Чо") ; 
Ғопсііоп аѕѕідпкКеуѕ () { 
уаг сапаідаёсеѕ=даоситепі . деёеЕ1 емепіѕВуТадмате ("діу") ; 
1Е (сапаіааіеѕ) { 
Ғоү (уар 1=0; і<сапаідаёеѕ.1еподіһ;і++) { 
уаг сапаідаёе=сапаіааёеѕ [1]; 
1Е (сапаідаіёе.с1аѕѕ\мапе.іпӣехоғ ('тоѕіса1Кеуѕ') >=0) { 
пакекеуроака (сапаідаѓе) ; 





' 
Й 


} 
} Ёцпсііоп пакекеуроага (е1) { 

Ғог (уаг 1=0; і<побеѕ.1еподёһ;і++) { 
уаг Ккеу=досотепё . скеаёеЕ1етепё ("аіу"); 
Кеу . с1 аѕѕМапе=поёеѕ [1] +" тиѕіса1Виёёоп"; 
Кеу .поіе=поёеѕ [1]; 
Кеу .оптоцзеоуег=р1ауМоее; 
е1 .аррепасһі1а (кеу) ; 








} 
Ғопсёіоп р1ауМобе (еуепё) { 
уар побе=ёһіѕ.поіе; 
уаг сопѕо1 е=даосопепі . деёЕ1І епепЕВу1а ('сопзо1е'); 
1Е (посе && сопѕо1е) { 
сопѕо1е.іппегнНтТМі+«поёе+" . " 








} Ј 


Ранее мы определяли клавиши в НТМГ-коде. Теперь мы задаем их в гло- 
бальном массиве ЈауаЅсгірі. Метод аѕѕівпКеуѕ () анализирует в документе 
все дескрипторы іу, принадлежащие верхнему уровню, и находит те из них, 
свойство с1аѕ$ Мате которых содержит значение тиѕісаІКеуѕ. Если такой эле- 
мент найден, предпринимается попытка заполнить его элементами іу, соот- 
ветствующими клавишам. Для этого используется функция такеКеубоага(). 
Она создает новые узлы РОМ, а затем выполняет с ними такие же действия, 
которые ранее выполнялись с ОРОМ -узлами, объявленными в НТМГ-коде. 
Функция обратного вызова р1ауМо{е () действует так же, как и ранее. 
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Поскольку мы заполнили пустые элементы ЧУ элементами, представля- 
ющими клавиши, создание второго набора клавиш не представляет труда. 
Соответствующее решение представлено в листинге 4.5. 


Листинг 4.5. Файл тиѕ+са! ауп Кеуѕ .Б 1 


«РОСТҮРЕ вит! РОВИС "-//ЛММЗС//ОТЬ ХНІМІ. 1.0 Ѕїгісі//ЕМ" 
"БИр://м\\.м3.оге/ТВ/х и ПИОТО/хЬ На - $111.44 а"> 

<і> <ие>Туо КеуБоаг45</НИе> <Неа4> <1іпк ге!=*з{у1езНее!' 
{уре-'{ехЕ/ез5' 

һгеѓ-'тиѕіса! ауп Кеуѕ.еѕ5 />2 <сгірі 
ќуре='їехі/јауаѕсгірі' ѕгс= • тиѕіса! ауп Кеуѕ.ј $'> 
</ѕсгірі> 

<ѕсгірё ёуре='бехё/јауаѕсгірі'> иміпӣоит.оп1іоай=аѕѕідпКеуѕ; 
</зсгірё> 

</ћҺеаа> 

<ройу> <діу іа='Ккеуроага-ёор: сІаѕѕ= 'ор1опа 
поѕіса1Кеуѕ'Х/аіу> <дӣіу ійа='Кеуроага-ѕійе с1аѕѕ='ѕійераг 
пиѕіса1Кеуѕ'Х/аіу> <@1у 1а='сопзо1е' с1аѕѕ='сопѕо1е• > 
</аіу> </ройу> </ҺЕт1> 


Для того чтобы добавить на страницу вторую клавиатуру, достаточно 
включить в НТМІ -файл одну дополнительную строку. В данном случае 
мы не собираемся располагать клавиатуры одну под другой, поэтому сти- 
ли, определяющие расположение, мы удалим из класса тиѕіса!Кеуѕ и офор- 
мим в виде отдельных классов. Модифицированные таблицы стилей показа- 
ны в листинге 4.6. 


^Листинг 4.6. Модифицированные стили в файле тиѕіса! йуп Кеуѕ.сѕѕ 
/* Общие стили для клавиатуры */ 
лпиѕісаІКеуѕ{ 
Баск=гоипа-со]!ог: ##е0а0; 
Богаег: ѕ01іа тагооп 2рх; 
роѕіїіоп: абзо|щЕе; 
оуегїом: аиѓо; 
таги: 4рх; 
} /* Размеры и расположение первой клавиатуры */ 
.СорТопа{ 
міаєһ: 536рх; 
Һеісһі: 68рх; 
сор: 24рх; 
ІеЁё: 24рх; 
} /* Размеры и расположение второй клавиатуры */ 
.ѕідераг { 
хіаєһ: 48рх; 
Һеісһі: 400рх; 
сор: 24рх; 
1еЁё: 570рх; 
} 
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рой | Руд-т РАО 









По .1а.1. 0. 1а. ѕо. ѓа, ті. ге. ті. їа. ѕо. 1а... до. ге. ті. а. ті. іа. 
Чо .їа. ѕо. іа. ії ао. ге. ѓа. Іа. Іа, ѕ0. 50. 50. 50. 50.50.18. 50. їа тті 
ге. до. ѕо.їа. ті. зо. іа. й. 


Рис. 4.5. Модифицированное приложение позволяет дизайнеру задавать несколько 
клавиатур. Используя С55 и средства воспроизведения в составе браузера, мы 
обеспечиваем горизонтальное и вертикальное расположение клавиш, не создавая 
для этого дополнительный Јама$сгірї-код 


В классе тизсаКеуз остались стили, общие для обеих клавиатур. Клас- 
сы ѓорІопв и ѕійебаг лишь задают их расположение. 

Выполнив таким образом реструктуризацию, мы создали условия для 
повторного использования кода. Внешний вид клавиатуры частично опре- 
деляется ЈауаЅсгірі-кодом; ее формированием занимается функция такеКеу- 
Боага(). Как видно на рис. 4.5, одна клавиатура располагается по горизон- 
тали, а другая — по вертикали. Как мы достигли этого? 

Функция такеКеубоата () позволяет без труда вычислить размер каждого 
элемента и определить его расположение. Если бы мы поступили так, то нам 
пришлось бы предпринимать меры для размещения клавиш по горизонтали 
или по вертикали. Специалисты, имеющие опыт разработки пользователь- 
ских интерфейсов для Јауа-программ и применявшие диспетчеры компонов- 
ки Гауош Мапарег, могут склониться именно к такому решению. Если мы по- 
ступим подобным образом, контролировать внешний вид компонентов будут 
не дизайнеры, а программисты, в результате конфликты станут неизбежны. 

Таким образом, принято решение, согласно которому функция таКеКеу-} 
Боага () влияет только на структуру документа. Размещение клавиш осу-! 
ществляется средствами браузера с учетом таблиц стилей; в данном случае 
используется стиль Ноа{. Важен тот факт, что размещение элементов кон- 

тролирует дизайнер. Программная логика и представление — разделены. 

Клавиатура — это относительно простой компонент. В более сложных слу- 

чаях, например, при организации дерева, бывает трудно обеспечить желае- 
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мое размещение элементов посредством встроенных средств браузера, и про- 
граммная реализация стилей становится неизбежной. Однако необходимо 
помнить о важности разделения представления и логики и стремиться до- 
биться этого. Средства воспроизведения в составе браузера обычно обеспе- 
чивают высокую производительность и работают надежно. Чтобы добить- 
ся такого же качества Јауа$сгірі-программы, приходится затрачивать мно- 
го усилий. 

На этом мы заканчиваем работу над представлением. В следующем разде- 
ле будет рассмотрена роль контроллера в рамках архитектуры МУС и его ре- 
ализация в Ајах-приложении посредством Јауа$сгірі-обработчиков событий. 


4.3. Контроллер в составе Ајах-приложения 


Контроллер в архитектуре МУС выполняет роль посредника между моделью 
и представлением. В программе с графическим пользовательским интерфей- 
сом, в частности, в составе клиентских средств Ајах, контроллер состоит из 
обработчиков событий. Эволюция клиентских программ для \еБ привела 
к тому, что в современных браузерах поддерживаются две различные моде- 
ли событий. Одна из них, классическая модель, относительно проста, одна- 
ко в настоящее время происходит ее замена новой моделью обработки, спе- 
цификация которой разработана У\ЗС. На момент написания данной книги 
новая модель была по-разному реализована в различных браузерах, и ее ис- 
пользование было сопряжено с проблемами. В данном разделе мы обсудим 
обе модели. 


4.3.1. Классические Јауабсгірі-обработчики 


Реализация ЈауаЅсгірі в МеБ-браузерах позволяет определять код, выполняе- 
мый в ответ на событие. Обычно событиями являются действия с мышью или 
клавиатурой. В современных браузерах, поддерживающих Ајах, обработчи- 
ки этих событий можно связать с большинством элементов, отображающихся 
на экране. Обработчики обеспечивают взаимодействие визуального пользо- 
вательского интерфейса, т.е. представления, и бизнес-объектов, составляю- 
щих модель. 

Классическая модель поддержки событий достаточно проста и использу- 
ется с момента появления Јауа$Ѕсгірі. В большинстве элементов РОМ преду- 
смотрены свойства, позволяющие связывать с ними функции обратного вы- 
зова. Например, для того, чтобы присоединить функцию, которая будет вы- 
зываться по щелчку на элементе туротЕетеп, мы должны написать следу- 
ющее выражение: 


туротЕетепѓ.опсіск=5ћомАпітаѓіеаМопКеу 


Здесь туротЕЈјетепі — любой элемент РОМ, к которому мы имеем доступ 
из программы. Функция ѕһомАпітаіеіМопКеу () — это обычная функция 
Јауа$сгірі, которая определяется следующим образом: 
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Таблица 4.1. Свойства, позволяющие связывать обработчики событий 
с элементами ОМ 


Свойство Описание 


оптоиѕеомег Активизируется, когда курсор мыши попадает в область, 
занимаемую элементом 


оптоиѕеоиї Активизируется, когда курсор мыши покидает область, 
занимаемую элементом 


оптоиѕетоме Активизируется при каждом перемещении курсора мыши 


в пределах области, занимаемой элементом 
опсііск Активизируется щелчком в области, занимаемой элементом 
опКкеургеѕѕ Активизируется щелчком мышью при условии, что элемент, над 
которым находится курсор, обладает фокусом ввода 
опїосиѕ Активизируется, когда видимый элемент получает фокус ввода 


опбіиг Активизируется, когда видимый элемент теряет фокус ввода 
Ғопсііоп ѕћомАпітаѓіеаМопкКеу(){ 
// Сложный код для поддержки движущихся изображений } 
Заметьте, что при связывании обработчика события мы не вызываем 
функцию, а передаем объект Еипсйоп, поэтому круглые скобки после имени 
не указываются. Ниже приведен пример распространенной ошибки. 


туротЕетепі.опсііск=5һомАпітаѓіеаМопкКеу(); 


Для некоторых программистов такая запись более привычна, однако при- 
водит к результату, отличному от желаемого. Функция будет выполняться 
не в результате щелчка на элементе РОМ, а в процессе присвоения, свойство 
опсИскК получит значение, возвращаемое функцией. Возможно, это сложное 
решение, при котором в результате выполнения одной функции возвраща- 
ется ссылка на другую, но подобный подход используется достаточно редко 
и требует от программиста высокой квалификации. Еще раз покажем, как 
правильно выполнять связывание обработчика. 


шурошЕетей.опс|ск=5ВомАпипаеаМопкеу; 


В результате ссылка на функцию обратного вызова присваивается эле- 
менту РОМ, сообщая ему о том, что функция должна быть вызвана щелч- 
ком на элементе. Элемент РОМ может содержать несколько свойств, предна- 
значенных для связывания обработчиков событий. Свойства, часто исполь- 
зуемые при создании графического пользовательского интерфейса, описа- 
ны в табл. 4.1. Встречавшиеся ранее свойства ХМІ.Ніїр Кедиеѕі.опгеайуѕіаїе 
и міпаож. опіоаа также предназначены для связывания обработчиков. 

Механизм обработки событий имеет одну особенность, которую часто не 
учитывают программисты, использующие ЈауаЅсгірі. Эту особенность необ- 
ходимо знать всем, кто собирается приступать к работе над клиентскими 
программами Ајах. 


Глава 4. Иер-страница в роли приложения 163 


Предположим, что мы связали с элементом РОМ функцию обратного вы- 
зова, используя для этого свойство опсііск. Эта функция получает управ- 
ление по щелчку мышью на элементе РОМ. Однако контекст функции (Т.е. 
значение, получаемое переменной 111$) соответствует узлу РОМ, который 
получаем событие (объекты Еипсііоп в языке ЈауаЅсгірі обсуждаются в при- 
ложении Б). Контекст зависит от того, как была объявлена функция. Этот 
эффект может привести к возникновению ошибки. 

Рассмотрим пример. Предположим, что мы определили класс, представ- 
ляющий объект кнопки. В нем указан узел РОМ, обработчик обратного вы- 
зова и значение, которое отображается после щелчка мышью на кнопке. Все 
экземпляры кнопки одинаковым образом реагируют на щелчок, потому мы 
определяем обработчик как метод класса. Теперь обратимся к ЈауаЅсгірі- 
коду. Конструктор кнопки имеет следующий вид: 


Ғопсіоп ВаИоп(уаше, дот Е1){ 
1ћіѕ.аотЕ1=аотЕ/; 
{015.уае=уаше; 


1ћ18.аотЕ1.опсііск=1һіѕ.сісКкНапаіег; 
} 


Определим обработчик в составе класса ВиЙоп. 


Воиѓѓоп.ргоѓоѓуре.сіскНапаіїег=ѓипсііоп()!{ 
а1ег{(161$.уаше); 
} 


Такое решение выглядит достаточно просто, но полученный результат — 
совсем не тот, которого можно было бы ожидать. В окне с сообщением отоб- 
ражается не значение, которое было передано конструктору, а сообщение ип- 
аейпеа. Это происходит по следующей причине. Браузер вызывает функ- 
цию сИскНап ег () по щелчку на элементе РОМ, поэтому задает контекст 
элемента РОМ, а не ЈауаЅсгірі-объекта ВиЙоп. Таким образом, 1115.уаще 
ссылается на свойство уаше элемента РОМ, а не объекта ВиЙоп. Это трудно 
предположить, глядя на определение обработчика события, не правда ли? 


Разрешить данную проблему можно, модифицировав конструктор следу- 
ющим образом: 


РапсНоп Вийоп(уаіџе,аӢотЕ1){ 
1ћ1ѕ.аотЕ1=аотЕ; 
{015$.уае=уае; 
{615.4отЕ1. ба Йоп ОЪ] =1һ18; 
1ћ18.даотЕ1.опсііск=1һіѕ.сісКкНапаіег; 


} 


Элемент РОМ по-прежнему не имеет свойства уаше, но содержит ссыл- 
ку на объект ВиЙоп, который используется для получения значения. Кроме 
того, нам надо изменить обработчик события. 


Виіѓоп.ргоѓоѓуре.сіскНапа1ег=ѓипсііоп()ї 
уаг БоиќопОбБј=#һіѕ.БийопоОЫј; 
уаг уаше=(БибопОЪ]} && БийопоОбј.уаіџе) ? 
Би ИопОБ].уаше : "ипкпомп уаше"; 
аІегі(уаІие); 
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Узел РОМ ссылается на объект Виіоп, который ссылается на свойство 
уаше, и наш обработчик получает требуемое значение. Мы можем присво- 
ить значение непосредственно узлу РОМ, но, связывая ссылку с базовым 
объектом, мы получаем возможность работать с элементами произвольной 
сложности. Следует заметить, что в данном случае был реализован "мини- 
вариант" архитектуры МУС, согласно которой элемент РОМ, выполняющий 
функции просмотра, отделен от объекта поддержки, являющегося моделью. 

Мы рассмотрели классическую модель обработки событий. Основной 
недостаток этой модели состоит в том, что она допускает для элемента нали- 
чие лишь одной функции обработки. При обсуждении образа разработки ОБ- 
ѕегуег в главе 3 мы говорили о том, что может потребоваться связать с элемен- 
том ОбзегуаМе любое количество элементов ОЪзегуег. Указанное здесь огра- 
ничение не является серьезным препятствием в работе над простым сценари- 
ем, но при переходе к более сложным клиентам Адах оно может существенно 
помешать нам. Этот вопрос будет подробно рассмотрен в разделе 4.3.3, а пока 
перейдем к новой модели обработки событий. 


4.3.2. Модель обработки событий МЗС 


Модель поддержки событий, предложенная МЗС, обеспечивает большую сте- 
пень гибкости, но она сложна в использовании. Согласно этой модели с эле- 
ментом РОМ может быть связано произвольное количество обработчиков. 
Более того, если действие происходит в области пересечения нескольких эле- 
ментов, обработчики каждого из них имеют шанс получить управление и за- 
претить остальные вызовы из стека событий. Этот эффект принято назы- 
вать "проглатыванием" (5\аШо\/п®) событий. Согласно спецификации осу- 
ществляются два прохода по стеку событий: первый — от внешнего элемента 
к внутреннему (т.е. от элемента, представляющего документ, к элементам, 
содержащимся в нем), в ходе которого происходит заполнение стека, а вто- 
рой — от внутреннего элемента к внешнему. На практике различные браузеры 
реализуют подобное поведение по-разному. 


В браузерах Мо7Ша и Ѕаѓагі функции обратного вызова, предназначен- 
ные для обработки событий, связываются с помощью функции аааЕуепі11- 
їепег(), а для разрыва связи осуществляется обращение к гетоуеЕуеп( 1 18- 
{епег(). Браузер Пиегпей Ехрогег предоставляет для этих целей функции 
айасһЕуепі () и аеѓасҺһЕуепї (). Объект хЕуепі, разработанный Майком 
Фостером (Міке Ғоѕіег) и входящий в состав библиотеки х, предпринимает 
попытку реализовать средства обработки событий, маскирующие различия 
между браузерами. Для этой цели он создает единую точку входа в соответ- 
ствии с образом разработки Еазаае (см. главу 3). 

Существуют также различия между браузерами, касающиеся обращений 
к обработчикам обратного вызова. В браузерах МохШШа, как и в классической 
модели обработки, контекст вызываемой функции определяется элементом 
РОМ, получившим событие. В Іһѓегпеї Ехр]огег контекст всегда определя- 
ется объектом Міпӣоу, и в результате невозможно выяснить, какой элемент 
РОМ вызвал функцию обработки. При написании обработчиков необходимо 
учитывать указанные различия, даже в случае применения объекта хЕуепї. 
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Следует также заметить, что ни одна из реализаций не предостав- 
ляет удобных средств получения списка всех обработчиков, связанных 
с элементом. 

По этой причине мы не рекомендуем вам использовать новую модель об- 
работки событий. Главный недостаток классической модели — отсутствие 
поддержки нескольких обработчиков — можно устранить, как вы узнаете 
далее, с помощью образов разработки. 


4.3.3. Реализация гибкой модели событий в Чауа$ стр 


Из-за несоответствия средств поддержки новой модели событий в различных 
браузерах гибкие средства обработки действий пользователя пока нельзя счи- 
тать доступными. В главе 3 мы описывали образ разработки Обзегуег, кото- 
рый соответствует основным требованиям разработчиков и позволяет добав- 
лять к источнику событий объекты Обѕегуег и удалять их. Таким образом 
обеспечивается необходимая степень гибкости. Очевидно, что специалисты 
У!ЗС сделали все возможное, чтобы устранить недостатки классической мо- 
дели, но производители браузеров не смогли обеспечить совместимость своих 
продуктов и, более того, в некоторых случаях допускали ошибки при реали- 
зации модели. Несмотря на то что классическая модель обработки событий 
не соответствует образу разработки ОБзегуег, мы постараемся исправить си- 
туацию, написав собственный код. 


Управление несколькими функциями обратного вызова 


Прежде чем реализовывать собственное решение, постараемся лучше понять 
проблему, а для этого рассмотрим простой пример. В листинге 4.7 приведен 
код документа, в котором элемент ЧУ реагирует на перемещение курсора 
мыши, выполняя два действия. 


Листинг4.7. Файл тоизетат. Вт 
<Ы[> <һеаа> <ПоКк ге1='#уІеѕһееі' 
{уре="ех(/ез5" һгеЁ='тпоџѕетаї.еѕѕ /> <ѕсгірі 
{уре='ехі/јауаѕсгірі'> уаг сигѕог=пи; 
міпаож.опіоаа=ѓипсііоп(){ 
уаг таѓ=аоситепі.веіЕетепіВуІ4('тоџѕетаї') ; 
таѓ.оптоцѕетоуе=тоцѕеОбђѕегуег; 
сигѕог= іоситепї.веіЕІетепіВу1а('сигѕог ); } 
Ғопсііоп тоиѕеОбѕегуег(еуепі){ 


уаг е=еуепі || іпаож.еуепі; 
мгіѓеЅѓаіиѕ(е); 
агау ТһотБЬпаі(е); 


Ғопсіоп мгііеЅіаїиѕ(е)/ 
міпаож.ѕіаїиѕ=е.сПепіХ+","+е.сіепѓҮ; 


Ғопсііоп агам Тіотбпаі (е)! 
ситѕог.ѕёу1е.Іеѓї=((е.спепёХ/5)-2) +"рх"; 
сигѕог.ѕіу1Іе.іор=((е.сйепіү/5)-2) +"рх"; 


} </ѕсгірі> </Леаа> <Боду> <аіу сЛаз5='тоизетае 
1а='тоцѕетаХ/аіу> <аіу с1азз=“Баштфпай’ 


166 Часть 11. Основные подходы к разработке приложений 





Рис. 4.6. Программа Моизета{ отслеживает события, связанные с перемещениями курсора 
мыши в главной области, двумя способам: во-первых, координаты курсора мыши отображаются 
в строке состояния браузера, а во-вторых, в области малого размера перемещается точка, 
отражающая движения мыши 


14='{БишьЬпа!1'> 

<аіу с1аѕѕ = 'сигѕог' 
іа = 'сигѕог'/> </аіу> 
</Бойу> 
</вЕт1> 


Во-первых, обработчик обновляет строку состояния браузера, вызывая 
для этого функцию \гЦез{а{ из (). Во-вторых, он обновляет небольшое изоб- 
ражение, изменяя в нем расположение точки, отражающей перемещение кур- 
сора мыши. Эти действия выполняются в функции агамТћштђпаі (). Внеш- 
ний вид Меб-страницы показан на рис. 4.6. 

Эти два действия выполняются независимо друг от друга, и нам жела- 
тельно обеспечить возможность менять их местами и включать между ними 
другие действия, являющиеся реакцией на перемещение курсора мыши. 
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Обработчиком события является функция тоџѕеОбѕегуег (). (Первая 
строка в теле функции необходима лишь из-за различий браузеров. В отличие 
т Мо7Ша, Орега и Ѕаѓагі, браузер Пиегпеё ЕхрІогег не передает параметры 
обработчику обратного вызова, а сохраняет объект Еует в міпаож.еуепі.) 
В данном примере обработчик по очереди вызывает функции жгіїеѕіаїиѕ () 
„ ЯгамТћитбБпаії (). Программа выполняет свое назначения, и, поскольку она 
предельно проста, код функции шопзеОБзегуег () понятен. В общем случае 
„ам надо разработать другой способ объединения обработчиков, который был 
бы пригоден для разработки сложных программ. 


Реализация образа разработки ОБзегуег в Чауа$сир\-программе 


Решением данной задачи может быть универсальный объект-маршрутизатор, 
который связывал бы с целевым элементом стандартную функцию, полу- 
чаюшую управление при возникновении события, и управлял бы набором 
функций-обработчиков. Для этого придется переписать код инициализации 
следующим образом: 
у\ушао\.оШоаа=ЁР@ашпсНоп() { 
уаг таі=аӢоситепі.веіЕ1етепіВуІа('тоиѕетаї!") ; 


уаг тоџѕеКоиќег=пеу јѕ Еуепі. ЕуепіКошѓег(таї, "оптоиѕетоуе"); 
тоиѕеКопѓег.ааа1іѕіепег(жтгіѓе$їаїиѕ) ; 
тооѕеКоиѓег.аааі1іѕѓіепег(агамТһитбпаі!); 


} 

Мы используем объект ЕуепіКошіег и передаем ему в качестве пара- 
метра элемент РОМ и тип события, которое хотим зарегистрировать. За- 
тем мы включаем в объект-маршрутизатор функции-обработчики. Объект- 
маршрутизатор также поддерживает метод гетоуе[іѕіепег(), который мы 
здесь не используем. Применение нашего гипотетического объекта выглядит 
хорошо, но как мы реализуем сам объект? 

Прежде всего нам надо написать конструктор объекта. В языке ЈауаЅсгірі 
это обычная функция. (В приложении Б содержится простое описание син- 
таксиса, используемого для создания объектов ЈауаЅсгірі. Если приведенный 
ниже код будет непонятным, обратитесь к этому описанию.) 

ј зЕуепЕ. ЕуепіКоцѓег=ѓипсіоп (е1, еуепіТуре)ї 

{015.15 пгз=пе\ Аггау();: 
1һіѕ.е1=е1; 
е1.еуепЕ К ощег={ 15; 

еЦПеуепТуре]=ј зЕуепЕ. Еуеп(Кощег.сааск; 

Здесь мы определили массив функций-обработчиков; первоначально этот 
массив пуст. Затем мы получаем ссылку на элемент РОМ и с помощью этой 
ссылки передаем элементу ссылку на текущий объект. Наши действия соот- 
ветствуют образу разработки, описанному в разделе 3.5.1. Затем мы задаем 
° качестве обработчика события статический метод класса Еуеп(Кощег с име- 
нем саПбаск. Заметьте, что в ЈауаЅсгірі использование квадратных скобок 
“точки дают одинаковые результаты. Следовательно, два приведенных ниже 
"ыражения эквивалентны. 
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е1 .оппоиѕеоуег 
е1 [ 'оптоцзеоуег ' ] 





Этот факт мы используем, передавая имя свойства в качестве параметра. 
Данное решение можно сравнить с механизмом отражения в Јауа или .МЕТ. 
Рассмотрим функцию обратного вызова. 























7 ѕЕуепёе . ЕуепеКоціег. са11раск= Ёцпсііоп (еуепі) { 
уаг е=еуепі || м1п9ом.еуепе; 
уар гоціег=һ1іѕ.еуепЕВКоџбеү; 
гоціег.поііғЁу (е) 
} 
Контекстом для данной функции является не объект маршрутизации, 
а узел РОМ. Мы извлекаем ссылку на ЕуепЕВоибег, которую присоедини- 
ли к узлу ПОМ, используя прием, рассмотренный ранее. Затем вызываем 
метод поёіѓу () маршрутизатора, передавая ему в качестве параметра объ- 
ект события. 


Полностью код объекта-маршрутизатора показан в листинге 4.8. 









































Листинг 4.8. Файл ЕуепЕВойеег. 7$ 

уар ]зЕуепе=пем Аггау(); 

7 звуепЕ. ЕуепЕКоцбсег= Ёипсііоп (е1, еуепе Туре) { 
ЕһҺ1іѕ.1ѕпгѕ=пет Аггау (); 
еҺіз.е1=е1; 

е1 .еуепЕВоџёег=ёһізѕ; 
е1 [еуепЕ Туре] =) ѕЕуепі . ЕуепіВоціег.са11раск; 


























3 ѕЕуепёе . ЕуепіКоціег . ргоіоіуре.аааіѕісепег= Ёопсёіоп (1ѕпг) { 
ЕҺ15ѕ.1ѕпгѕ.аррепа (1ѕпг,ігие); 





7 ѕЕуепё . ЕуепЕКоціег . ргоіоіуре. гепоуеі ѕёепег= Ёопсёіоп (1ѕпг) { 
ЕҺ15ѕ.1ѕпг5.гепоуе (1ѕпг); 











7 ѕЕуепЕ . ЕуепіКоціег .ргоёсоіуре.побі Ёу= Ёипсііоп (е) { 
уаг 1ѕпуѕ=іһіѕ.1ѕпгѕ; 
Гог (уар 1=0;1<15пг5.1еподёһ;і++) { 

уар 1ѕпг=1ѕпгѕ [1]; 1зѕпг.са11(ёһізѕ,е); 


} 











) 

7 ѕЕуепе . ЕуепіКоціег.са1 1 раск= Ёопсёіоп (еуепё) { 
уаг е=еуепі І| иміпаоу.еуепі; 
уаг гоцџіег=іһіѕ.еуепіВКоціеү; 
гоціег.поііЁу (е) 


) 











Заметьте, что некоторые из методов массива соответствуют не стандар- 
ту ЈауаЅсгірі, а расширенному определению массива, которое обсуждается 
в приложении Б. Функции ааа іѕіепег() и гетоуе[ іѕіепетг () легко реали- 
зовать, используя методы аррепа () и гетоуе (). Функции-обработчики вызы- 
ваются с использованием метода ЕаипсИоп, са! (), первый параметр которо- 
го задает контекст функции, а последующие параметры (в данном случае — 
событие) передаются вызываемой функции. 
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Модифицированный вариант НТМТ-документа показан в листинге 4.9. 


ЛИСТИНГА. Документ тоизета{.1 (11, использующий объект ЕуеКощег 
<Ыті> <һеаа> <ПпКк ге1='5#уІеѕһееі' 
(уре='їехі/еѕѕ. ҺгеЁ='тоџѕетаї.еѕѕ' /> <ѕсгірї 
їуре='ехі/јауаѕсгірі ѕгс='ехїігаѕ-аггау.јѕ'Х/ѕсгірі> <ѕсгірі 
{уре='ехі/јауаѕсгірі ѕгс= 'еуепіКоџѓег.јѕ' Х/ѕсгірі> <ѕсгірі 
уре='ехі/јауаѕсгірі'> уаг сигѕог= пи; 
міпаож.ошоаа=ѓипсііоп()!{ 
уаг тша(=доситеш. еЕететВу[а(‘тоизета"’); 
согѕог=аоситепі.веїЕіетепіВуІа('сигѕог') ; 
уаг тоизеКощег=пем 
јѕЕуепі. ЕуепіКошіег(таї, "оптоцѕетоуе") ; 
шоц5еКощег.аа ал {епег(\угИе {аи$) ; 
тооѕеКоиѓег.аааііѕѓіепег(агамТһитбЫпаі!); 
} Ёопсіоп мгііеЅќаіиѕ(е){ 
міпаож.ѕіаѓіиѕ=е.сПепіХ+","+е.сПепіү 
} Ёопсйоп агамТһитБпаі(е){ 
сигѕог.ѕїіуІе.Іеѓг-((е.сііепіХ/5)-2) +"рх"; 
сигѕог.ѕіу1е.іор=((е.спепѓҮ/5)-2) +"рх"; 
} </ѕсгірі> </Љеаа> <боду> < с1аѕѕ='тоцѕетаї 
іа='тпоџѕета('х/іу> <аіу с1а85=' #һитђЬпаі' 
іа='һитбЬпаі'> 
<діу сІаѕѕ='сигѕог' 
іа='сигѕог'/> </аіу> </оду> </ЉЛт> 


Встроенный код Јауа$Ѕсгірі существенно упрощен. В данном случае нам 
надо лишь создать объект Еуе{Кощег, передать ему функции обработки 
и реализовать эти обработчики. Дальнейшим развитием документа и под- 
держивающего его кода может стать включение флажков опций, посред- 
ством которых пользователь сможет динамически добавлять или удалять 
обработчики. Мы предлагаем читателю самостоятельно реализовать дан- 
ную возможность. 

На этом мы заканчиваем обсуждение уровня контроллера в Ајах- 
приложении и роли, которую образы разработки, в частности ОБзегуег, игра- 
ют в создании понятного и пригодного для сопровождения кода. В следую- 
щем разделе мы рассмотрим последний элемент архитектуры МУС — модель. 


4.4. Модель в составе Ајах-приложения 


Модель представляет собой область применения приложения — интерак- 
тивный магазин, музыкальный инструмент и даже набор точек в про- 
странстве. Оосштепі Обђјесї Моде, или РОМ, не является моделью Ајах- 
приложения. В данном случае роль модели выполняет код, написанный на 
языке ЈауаЅсгірі. Подобно другим образам разработки, архитектура МУС 
неразрывно связана с объектным подходом. 
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Разработчики ЈауаЅсгірі не задумывали его как объектно-ориентирован- ' 
ный язык, однако в нем, не затрачивая слишком много усилий, можно ор- 
ганизовать некоторое подобие объектов. Посредством механизма прототипов 
можно определить нечто, похожее на классы, а некоторые разработчики пы- 
таются даже реализовать наследование. Эти вопросы мы обсудим в прило- 
жении Б. До сих пор, создавая на ЈауаЅсгірі приложение, соответствующее 
архитектуре "модель-представление-контроллер", мы придерживались сти-Г 
ля программирования, типичного для ЈауаЅсгірі, например, передавали объ- 
екты ЕипсИоп непосредственно обработчикам событий. Определяя модель, 
желательно использовать объекты ЈауаЅсгірі и придерживаться объектного 
подхода настолько, насколько это имеет смысл для данного языка. В после- 
дующих разделах мы покажем, как это можно сделать. 


4.4.1. Использование Чауа$спрЕ для моделирования 
предметной области 


Обсуждая представление, мы все время упоминали элементы РОМ. Говоря 
о контроллере, мы были ограничены рамками модели событий, реализован- 
ной в браузере. При создании модели мы будем иметь дело почти исключи- 
тельно с кодом ЈауаЅсгірі и практически не будем учитывать возможности 
браузеров. Для тех программистов, которые вынуждены постоянно бороться 
с несовместимостью браузеров, подобные условия работы покажутся предель- 
но комфортными. 


Рассмотрим простой пример. В главе 3 обсуждалось приложение для ин- 
терактивного магазина, а внимание в основном уделялось генерации данных 
серверными программами. Эти данные определяли товары в терминах идеи-; 
тификаторов, имен и описаний. Кроме того, учитывались цена, цвет и размер. 
Вернемся к данному примеру и рассмотрим, что произойдет, когда инфор- 
мация будет доставлена клиенту. В процессе работы приложение получает 
несколько подобных потоков данных и должно хранить их в памяти. Область 
памяти для хранения данных можно рассматривать как кэш на стороне кли- 
ента. Есть возможность быстро отобразить находящуюся в нем информацию, 
не обращаясь к серверу. О преимуществах такого подхода см. в главе 1. 


Определим простой ЈауаЅсгірі-объект, соответствующий изделию, под- 
держиваемому сервером. Пример такого объекта приведен в листинге 4.10. 


Листинг 4.10. Файл Сагтепь јѕ 


уаг вагтепіѕ=пеу Аггау(); Ғипсііоп 

Сагтепі(іа, 11е, аеѕсгірііоп,ргісе)! 
1һіѕ.іа=іа; 
сагтепіѕ [1а] =ёһіЗ; 
651$ .6161е=6161е; 
ЕҺіѕ.дӢеѕсгірііоп=ӣеѕсгіріёіоп; 
еҺіѕ.ргісе=ргісе; 
еһіѕ.со1огѕ=пеи Орјесё (); 
Е51$.512ез=рем Орјесі (); 

} 

Сагмепе .ргоіоіуре.ааасо1ог (со1ог) { 
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1 іѕ.со1огѕ.аррепа(со1ог, їгие); } 
Сагтепё.ргоѓоѓуре.аааЅ іле (ѕіле) { 
{01$.517е$.аррепа ($17е, гие); ) 


Для хранения информации об изделиях определен глобальный массив. 
(Вы скажете, что использование глобальных переменных — плохой стиль 
программирования, и будете правы. При разработке реальных продуктов для 
этой цели обычно используются объекты пространств имен, однако в данном 
случае мы не будем поступать так, чтобы неоправданно не усложнять про- 
грамму.) Это ассоциативный массив, для которого ключевыми значениями 
являются идентификаторы изделий. Такой подход гарантирует, что в каж- 
дый конкретный момент времени будет отображаться только одна ссылка на 
каждый тип товара. Все простые свойства, не являющиеся массивами, зада- 
ются в конструкторе. В момент определения массивы пусты. Для включения 
в них элементов используются специальные методы, которые обращаются 
к расширенному коду поддержки массивов (подробнее об этом — в приложе- 
нии Б). Это также позволяет исключить дублирование данных. 


Мы не создаем 2е{- и ѕеі-методы и не реализуем полный контроль доступа 
посредством определения областей видимости для переменных и методов, что 
позволяют сделать объектно-ориентированные языки. Существуют способы 
обеспечения таких возможностей (они будут обсуждаться в приложении Б), 
но сейчас мы предпочитаем сделать модель как можно более простой. 

При разборе потока ХМГ-данных целесообразно сначала создать пустой 
объект Сагтепё а затем заполнять его информацией. Некоторые читатели 
удивятся, почему мы не предусмотрели более простой конструктор. На самом 
деле мы сделали это. Функции Јауа$сгірі позволяют задавать переменное ко- 
личество параметров; недостающие параметры заменяются значениями пи. 
Таким образом, два приведенных ниже вызова эквивалентны. 


уаг вагтепё=пем Сагтеп(( 123); 

уаг гагтет=пем Сагтеп{(123 па П, па, пи); 

Идентификатор задавать необходимо, поскольку он используется в кон- 
структоре для включения нового объекта в глобальный список изделий. 


4.4.2. Взаимодействие с сервером 


Для того чтобы генерировать объекты Сагтепі в клиентской программе, нам 
надо организовать разбор ХМГ-данных. О разборе мы уже говорили в гла- 
ве 2, кроме того, мы вернемся к этому вопросу в главе 5, поэтому сейчас не 
будем детально обсуждать этот процесс. ХМГ-документ содержит дескрипто- 
ры, атрибуты и содержимое элементов. Для чтения атрибутов мы используем 
свойство аїїгібоќѓеѕ и функцию ге Мате Цет(), а для чтения тела дескрип- 
тора — свойства Ё ігѕіСһі1а и даа. Например: 


вагтепі.аеѕсгірііоп=аеѕсгТае.ЁігѕіСһіа.ааѓа; 


С помощью этого выражения можно произвести разбор следующего ХМІ- 
Фрагмента: 
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<аеѕсгірііоп>Іагоде Емееау Паб Тоок1па 11ке ап опарреа11па 

зЕхамрегху </деѕсгірёіоп> 

Заметьте, что информация об изделиях автоматически помещается в гло- 
бальный массив по мере создания объектов; запись в массив предусмотрена 
в теле конструктора. Удалить изделие из массива также просто. 


РапсНоп опгевіѕќегСагтепі(1іа)!{ 
ваттепіѕ[іај<«пиші; 


Данный фрагмент кода удаляет из глобального массива, выполняющего 
функцию реестра, информацию об изделии, но не разрушает уже созданный 
экземпляр объекта Сагтепі. Поэтому имеет смысл проверить, используется 
ли объект Сагтепї. 


Сагтепі.ргоѓоѓуре.іѕУМаһа=ѓипсііоп()! 
геїогп вагтепіѕ[һ1ѕ.іа|!=п011; 


} 

На текущий момент мы определили на стороне клиента простой способ 
обработки информации, передаваемой с сервера. На каждом шаге обработ- 
ки используются объекты, простые для восприятия и поддержки. Повторим 
еще раз основные этапы разработки. Сначала мы генерируем на стороне сер- 
вера объектную модель. Исходной информацией являются данные из базы. 
В разделе 3.4.2 было рассмотрено решение этой задачи с помощью инструмен- 
та ОКМ (Објесі-КеІаійопа! Марр!1), который естественным образом обеспе- 
чивает двустороннее взаимодействие объектной модели и базы данных. Мы 
оформляем данные в виде объектов, модифицируем и сохраняем их. 


Далее используем систему шаблонов для генерации потока ХМГ-данных 
и выполняем разбор этого потока, чтобы создать объектную модель на уровне 
Јауа$сгірі-программы. На этом этапе мы выполняем разбор вручную. Воз- 
можно, вскоре появятся специализированные библиотеки, ориентированные 
на решение подобных задач. 

В приложении, предназначенном для администрирования, нам может по- 
надобиться отредактировать данные, изменяя ЈауаЅсгірі-модель, а затем пе- 
редать изменения серверу. При этом есть опасность появления двух копий 
модели, не синхронизированных друг с другом. 

В классическом М\еБ-приложении все "интеллектуальные" функции реа- 
лизованы на сервере, следовательно, там расположена модель. Такое реше- 
ние применяется независимо от используемого языка. В Ај ах-приложении мы 
распределяем обработку данных между клиентом и сервером, поэтому кли- 
ент получает возможность самостоятельно принимать некоторые решения, 
не обращаясь к серверу. Если клиент должен принимать только простые ре- 
шения, мы можем написать код, ориентированный на конкретную задачу, но 
в этом случае ситуация будет похожа на классическое приложение, т.е. ос- 
новные операции будут по-прежнему выполняться сервером с неизбежным 
прерыванием работы пользователя. Для того чтобы клиент смог принимать 
более серьезные решения, ему необходима информация о предметной обла- 
сти, т.е. ее модель. 
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Модель на сервере нужна в любом случае, так как именно там находятся 
важные ресурсы, например, база данных, средства доступа к существующим 
программам и т.д. Таким образом, модель предметной области на стороне 
клиента обязана взаимодействовать с моделью на стороне сервера. Что же из 
этого следует? На этот вопрос мы попытаемся ответить в главе 5, где продол- 
яшм разговор о взаимодействии клиента и сервера. Там же мы затронем во- 
просы разделения модели предметной области между различными уровнями. 

На данный момент мы рассмотрели модель, представление и контроллер 
без учета их взаимодействия друг с другом. Закончим эту главу обсуждением 
вопросов совместной работы модели и представления. 


4.5. Генерация представления на основе модели 


формируя код, выполняемый на стороне клиента, в соответствии с архитек- 
турой МУС, мы получили три отдельные подсистемы. Разделение функций 
позволяет создавать более понятные программы, но оно же приводит к уве- 
личению объема кода. Противники применения образов разработки аргумен- 
тируют свою позицию тем, что такой подход способен превратить решение 
простейшей задачи в сложнейшую процедуру (разработчикам, применяющим 
Ещегризе ЈауаВеапѕ, такая ситуация хорошо известна). 

Создание приложений, насчитывающих несколько уровней, часто приво- 
дит к повторению информации на разных уровнях. Мы хорошо понимаем 
важность принципа ОКУ и знаем, что наилучший способ избежать дублиро- 
вания — определять информацию на одном уровне и на ее основании генери- 
ровать остальные уровни. В данном разделе мы постараемся применить этот 
принцип на практике и опишем подход, позволяющий упростить реализацию 
архитектуры МУС. Обратим внимание на представление. 

До сих пор мы рассматривали представление как код, созданный вруч- 
ную и позволяющий отображать модель. Благодаря такому подходу мы могли 
достаточно свободно определять, что должен видеть пользователь. Однако 
в ряде случаев подобная свобода оказывается излишней, а программирова- 
ние пользовательского интерфейса вручную всегда было скучным и утоми- 
тельным занятием. Альтернативный подход предполагает автоматическую 
генерацию пользовательского интерфейса или хотя бы его компонентов на 
основе модели. Такой принцип уже использовался в среде этаШа и в си- 
стеме М№акеа Објесіѕ Лауа/.МЕТ. Язык ЈауаЅсгірі также вполне подходит для 
решения подобных задач. Рассмотрим, что можно сделать средствами от- 
ражения Јауа$сгірі, и создадим универсальный компонент "Објесі Вгомзег", 
который может быть использован в качестве представления для любого объ- 
екта Јауа$сгірі. 


4.5.1. Отражение объектов Јауа$Ѕсгірі 


В большинстве случаев при написании кода для работы с объектом мы име- 
ли достаточно полное представление о том, что это за объект и что можно 
сделать с его помощью. Однако в некоторых случаях приходится создавать 
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Рис. 4.7. В данном примере Објесћіемег используется для 

отображения иерархической системы планет, для каждой из 
которых поддерживается ряд свойств. Кроме того, в массиве 
хранится дополнительная информация 


код "вслепую", не имея предварительных сведений об объекте. Именно так 
приходится поступать при генерации интерфейса для объектов, составляю- 
щих модель. В идеале было бы неплохо реализовать универсальное решение, 
которое подходило бы для любой предметной области: финансовой деятель- 
ности, электронной коммерции, визуализации результатов научных исследо- 
ваний и т.д. В данном разделе вы ознакомитесь с ЈауаЅсгірі-библиотекой ОБ- 
Лес \Ме\мег, которую вы, может быть, захотите использовать при разработке 
своих приложений. Для того чтобы помочь вам составить представление об 
этой библиотеке, на рис. 4.7 показано несколько уровней сложного графа, 
отображаемых с помощью ОбђјесіМіемег. 


Объект, выбранный для просмотра, представляет планету Меркурий. 
Этот объект достаточно сложен. Помимо обычных свойств, значениями ко- 
торых являются числа или строки, он содержит ОКІ, изображения и массив 
с дополнительными данными. ОБес\е\мег обрабатывает всю информацию, 
не имея предварительных сведений о типе объекта. 


Процесс исследования объекта, выяснения его свойств и возможностей 
называется отражением (геЙесііоп). Читатели, имеющие опыт работы с Тауа 
или .МЕТ, уже знакомы с этим термином. Возможности отражения, реализо- 
ванные в языке ЈауаЅсгірё, мы рассмотрим подробно в приложении Б. Здесь 
же только скажем, что объект ЈауаЅсгірі можно исследовать так, как будто 
он представляет собой ассоциативный массив. Приведенный ниже фрагмент 
кода выводит информацию о свойствах объекта. 


ин. 


уаг аеѕсгірійоп»""; 
Гог (уаг і іп МУуОЫ)){ 
уаг ргорегіу= МуОЫЈ[1; 
аеѕсгірііоп+=1і+" = "+ргорегіу+"(ВВ88)п"; 
} а1егі(деѕсгірііоп); 
Представление данных посредством окна, предназначенного для вывода 
сообщений, — не самое удачное решение, так как это окно может не соче- 
таться с остальными компонентами интерфейса. Мы выбрали такой подход 


лишь для того, чтобы упростить пример. В листинге 4.11 представлен код 
ОЫјесіМіемег. 
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Листинг 4.11. Библиотека ОрјесіМ1іекег 


орјуіемег . Орјесіуіеинек= Ёцпсііоп (орј,аіу,іѕІп1іпе,адймеу) { 
ѕЕу11пӯ. гетоуеАд11сһі1агеп (діу) ; 

Һіѕ.орј есі=орј; 

һіѕ.тмаіпріу=41у; 

һ1ѕ.таіпріу.уіеиег=һіѕ ; 
һ1ѕ.1ѕ1п1іпе=іѕіп1іпе; 

р1$ .ааЯМем=ааЯМем; 
аг сСар1е=аосотепе .скеакеЕ1етепе ("ёар1е"); 
һ1ѕ.срода=аоситепё . скеасеЕ1етепе ("ЕБо@у"); 
ар1е.аррепасһі1а (.һіѕ.іроа) ; 

һҺіѕ.Ёіе1аѕ=пеи Аггауо; 

һ1іѕ.сһі1агеп=пеуи Аггауо; 
ог (маг і іп ёһіѕ.орјесі) { 

еһіѕ.#іе1а5ѕ [1] =пем орјуіеиег.РгорегіуҮіеиег ( 
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} 
ор) утемег . РгорегіуУіеинег= Еопсііоп (ор) есеУ1емег ‚ папе) { 
һ1іѕ.орјесіуіемнег=орјесіУіеиег; 
215 .папе=папе; 
һ1ѕ.уа1џе=орјесёуіеиег.орјесё [&61$.папе]; 
һіѕ. гомТг=аоситепі . сгеаёеЕ1етмепі ("Ег") ; 
Еһіѕ. оит. с1аѕѕМатме= ' ор) У1емВом' ; 
Ећһ1іѕ.уа1Та=аоситепі . сгеаёеЕ1емепі ("ёа"); 
Еһіѕ.уа1та.с1аѕѕмМатпе= 'орјуіеу\а1п0е' ; 
һ1ѕ.уа1та.уіемек=ёһіѕ; 
һ1іѕ.гоитг .аррепасһі1а (ёһіѕ.уа1та) ; 
аг уа1ріу=һіѕ.гепаегбітмр1е (); 
ЕҺіѕ.уа1та.аррепасћһі1а (уа1ріу); 
уіемег .роа.аррепасһі1а (Еһіѕ.гоитТг); 
} 
орјуіеиег .Ргорегеу\У1етех .ргособсуре . гепдег$ 1тр1е=ЕопсЕтол () { 
уаг уа1ріу=доситепі . скеабеЕ1етепе ("діу"); 
уаг уа1Тхі=досотепі . ссеабеТехЕеМоае (Еһіѕ.уаіпце); 
уа101у.аррепасћһі1а (уа1тхё) ; 
1Е (Еһ1ѕ.ѕрес.еаіёар1е) { 
уа10іу.сіаѕѕМаме+=" едіёар1е"; 
уа1ріу.уіемег=ёһіѕ; 
уа1ріу.опс1іск=орјуіеиег . РгорегіууУіекег.еаіібітр1іеРгорегіу; 
} 


тебигп уа1ріу; 
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В состав библиотеки входят два объекта: 05) ес(\У1емег, предназначенный 
Для просмотра объекта и формирования НТМІ-таблицы, и Ргорегіууіемег, 
который отображает имя и значение отдельного свойства и представляет их 
° виде строки таблицы. 
В целом задача решена, но существует ряд проблем. Во-первых, ОБ- 
3 есіМіемег исследует каждое свойство. Если вы добавите к прототипу вспо- 
могательные функции, 00] есіуіемег обнаружит их. Если вы обработаете та- 
ким способом узел ПОМ, то увидите все встроенные свойства и сможете оце- 
нить, насколько сложен элемент рОМ. В большинстве случаев нет необхо- 










































































176 Часть 11. Основные подходы к разработке приложений 


димости представлять пользователю все свойства объекта. Выбрать свойства 
для отображения можно, присваивая объекту перед воспроизведением специ- 
альное свойство, представляющее собой массив. Этот подход иллюстрируется 
кодом, приведенным в листинге 4.12. 


Листинг 4.12. Применение свойства орјуіемѕрес 
орјуіемег .Орјесіуіеиег= Ғопсёіоп (орј,діу,іѕІп1іпе,ааамеи) { 
ѕіу1іпа. гетоуеАд11сһі1агеп (дӢіу) ; 
һіѕ.орјесі=орј; 
һіѕ.ѕрес=орјуіемег.деібрес (орј); 
һіѕ.щаіпріу=аіу; 
һіѕ.маіпріу.уіемнек=һіѕ; 
һ1ѕ.1ѕ1п1іпе=іѕіп1іпе; 
һ1ѕ.ааамеит=ааамет; 
аг сар1е=аосопепі . сгеабеЕ1епмепі ("ёаріе"); 
һ1ѕ. Ероа=дӢосотепі . скеаёеЕ1епепі ("Сроӣу") ; 
ар1е.аррепасһіта (єһіѕ.ёроа); 
15. Е1е1Ч95=пемАгкау () ; 
һіѕ.сһі1агеп=пеу Аггау (); 
ог (маг 1=0,-і<іһіѕ.ѕрес.1еподёһ;і++) { 
еһ1іѕ.Ғіе1аѕ [1] =пем орјуіеинег. РгорегёуУіеиег ( 
651$,6615$.5ресЕт] 
); 
} 
ор] у1емех .дчесбрес=Еапс®е1ой (057) { 
хебоаги (орј.орјуіемЅрес) ? 
ору .орјуіеи5рес 
орјуіемег.аціобрес (орј) ; 
} орјуіеиег .аціоѕрес= Ёџпсёіоп (орј) { 
уаг пепрегз=пем Аггау (); 
Ғор (уаг ркорМаше іп орј) { 
уаг зрес= { папе: ргормапе }; 
пепрегз.аррепа (ѕрес); 
} 
тебогп пепрегѕ; 
} 
оЬ) у1емех.Ргорегку\1емег=ЕайсЕ1 оп (ор) есе\У1емег ‚ мепбегбрес) { 
еһіѕ.орјесіуіенег=орјесіуіеиег; 
ЕҺ15ѕ.ѕрес=тепрегбрес; 
ЕҺ1ѕ.папе=һіѕ.ѕрес.пате; 





е а еа аа. 
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Мы определили свойство објМіеуЅрес, которое используется конструк- 
тором Објесіуіемег. Если данное свойство отсутствует, оно формируется 
в функции аџѓоЅресО путем анализа объекта. Свойство об] Ме\узрес пред- 
ставляет собой массив, каждый элемент которого является таблицей свойств. 
В данном случае мы генерируем только свойство пате. Конструктору Ргор- 
егіуУіемег передается описание свойства, из которого можно извлечь ин- 
струкции о порядке воспроизведения. 

Предоставляя спецификацию для объекта, обрабатываемого ОБес\ежег, 
мы можем ограничить набор отображаемых свойств. 
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Вторая проблема, связанная с использованием ОбјесіМіеуег, состоит 
в том, что этот объект плохо обрабатывает сложные свойства. При добав- 
лении к строке объектов, массивов и функций вызывается метод їо$їгіпе (). 
В случае объекта она возвращает совершенно неинформативное описание 
типа [Објесё оБ]ес{]|. Для объекта ЕипсИоп возвращается исходный код 
функции. По этой причине необходимо различать разные типы свойств. 
Сделать это можно с помощью оператора іпѕѓіапсеоѓ. Учитывая выше на- 


званные особенности, рассмотрим, как можно улучшить средства отображе- 
ния объекта. 


4.5.2. Обработка массивов и объектов 


Для того чтобы обеспечить поддержку массивов и объектов, надо дать воз- 
можность пользователю прослеживать их внутреннюю структуру путем при- 
менения к каждому свойству объекта ОбјесіМіемег. Сделать это можно раз- 
ными способами. В данном случае мы представим дочерние объекты в виде 
дополнительных окон, расположенных по принципу иерархического меню. 

Чтобы получить требуемый результат, надо в первую очередь добавить 
к спецификации объекта свойство {уре и определить поддерживаемые типы. 

орјуіемег.ТҮРЕ ЅІМРІЕ="ѕіюр1е";: 

орјуіеиег.ТҮРЕ АВКВАҮ="аггау"; орјуіеиег.ТҮРЕ ЕОМСТІОМ= " Ёопсіёіоп"; 

ору уіемег.ТҮРЕ ТІМАСЕ ОК ="ітаде цг1" ; 

ор) утемег . ТҮРЕ _ОВЈЕСТ="орјесі"; 






































Модифицируем функцию, которая генерирует спецификации объектов, 
не имеющих собственных описаний, как показано в листинге 4.13. 


Листинг 4.13. Модифицированная функция аџіоЅрес() 
орјуіемег . аабобрес=ЕопсЕ1оп (ору) { 
уаг пепрегѕ=пеу Аггау (); 
Ғог (уаг ргорМаме іп орј) { 
уаг ргорУа1ае=оЪ] [пате]; 
уаг ргорТуре=орјуіемег .аціотТуре (уа1ае); 
уаг ѕрес= { папе : ргормате, Еуре:ргорТуре}; 
пепрегз .аррепа (зрес); 





} 


1Е (о) && орј.1епоёһ>0) { 

Ғоү (уаг 1=0;і<орј.1Іеподёһ;і++) { 
уаг ргорМапме="агкау ["+!+"]"; 
уах ргорУа1ае=оЪ) [1]; 
уаг ргорТуре=орјуіемег .Орјесёуіекег . аи оТуре (уа1ае); 
уаг ѕрес= { папе : ргормапе, уре: ргорТуре}; 
пепрегз .аррепа (ѕрес); 

) 








1 
геіогп пепрегѕ; 


} 


об] ме\мег.ащоТуре=РеапсНоп(уае){ 
уаг Туре=обмемег.ТУРЕ_$1МРИЕЕ; 
1 ((уаше шУуапсеоЁ Аггау)){ 
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фуре=оБ]мемег.ТУРЕ_АВКАХ; 

Ле15е іҒ (уаше іпѕќапсеоЁ РЕипс оп) { 
їуре=објуіемег. ТҮРЕ ЕОМСТІОМ№; 

}е1ѕе 1Г (уаше іпѕіапсеоѓ Објесі) { 
Хуре=објуіемег. ТҮРЕ ОВЈЕСТ; 


геіигп туре; 


Заметьте, что мы также реализовали поддержку массивов с числовыми 
индексами, элементы которых нельзя обработать в цикле Ёог... іп. 
Далее нам необходимо изменить объект РгорегіуҮіемег так, чтобы он 
учитывал различия типов и соответственно воспроизводил данные. Модифи- 
цированный вариант конструктора РгорегіуУіеиег показан в листинге 4.14. 









































Листинг 4.14. Модифицированный конструктор РгорегЕуУ\У1емег 
орјуіемег . РгорегіуУіеиег= Ёипсііоп 
(орјесіуіеиег ‚ тепрегбрес,аррепадітТор) { 
һіѕ.орјесіуіемнег=орјесіУіеиег; 
һіѕ.ѕрес=тетрегЅрес; 2 
һіѕ.паме=һіѕ.ѕрес.папе; 
һіѕ.буре=һіѕ.ѕрес.іуре; 
һіѕ.уа1џое=орјесіуіеиег.орјесі [6һіѕ.пате]; 
1$ .хомТх=Чосамепе . сгеаёбеЕ1етепё ("ёг") ; 























топос со 








ЕҺіѕ.готтТг.с1аѕѕмМате= ' ор) У1емВом' ; 
уаг іѕСопр1ехтТуре= (Еһіѕ.іуре==орјуіеинег.ТҮРЕ АВВАҮ 
І| ЕҺіѕ.ёуре==орјуіеиег.ТҮРЕ ОВЈЕСТ); 
1Е ( !(іѕСопр1ехТуре && 
ЕҺіѕ.орјесіуіенег.іѕІп1іпе ) 

















еҺіѕ.патета=ёһіѕ.гепдегѕідеНеааег () ; 
ЕҺіѕ. роит .аррепасһі1а (&һіѕ.патмета) ; 








ЕҺіѕ.уа1Тта=аоситепё . сгеаёеЕ1епепі ("іа") ; 





ЕҺіѕ.уа1та.с1аѕѕмаме='орј У1еи\Уа1ае* ; 
ЕҺіѕ.уа1та.уіенег=ёһіѕ; 
ЕҺіѕ.гоимтТг.аррепасһі1а(&һіѕ.уа1та) ; 
1Е (іѕСопр1ехТуре) { 

1Е (ЕһҺіѕ.уіемег.іѕ1п1іпе) { 

21$ .уа1Та.со1брап=2 ; 

аг патеріу=һіѕ.гепдӢегторНеаайег (); 

һіѕ.уа1та.аррепасһі1а (патмеріу) ; 

аг уа1ріу=Еһіѕ.гепаегІп1іпеОорјесі (); 

һіѕ.уа1та.аррепасһі1а (уа1ріху); 

ѕе{ 

аг уа1ріу=Еһіѕ.гепдегРороцџіОрјесё (); 

ЕҺіѕ.уа1та.аррепасһі1а (уа1ріху); 





4 


4 





Б 


зе 


< 











е1ѕе 1Е 
(515$ .суре==ор)у1емег. ТУРЕ_ТМАСЕ_ОВП) { 
уаг уа1 1 то=һіѕ.гепаегітаде (); 
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Ећ1ѕ.уа1та.аррепасћһі1а (уа1]пта); 
} 
е1зе 1Е 
(6ћ15.іуре==орјуіеиег.ТҮРЕ ЅІМРІЕ 
уаг уа1Тхі=+һіѕ.кепдегбітр1е (); 
еһіѕ.уа1та.аррепасһі1а (уа1тхё) ; 








= 


} 
1Е (аррепадётТор) { 





ѕіу11пӯд.іпѕегіАіТор (уіемег.іроа,Еһіѕ.гомтТг) ; 
}е1зе{ 
у1емег.Ероа. аррепаСЬ11а (&№1$.хгомТк); 
} 


Для того чтобы обработать разные типы свойств, мы определили различ- 
ные методы воспроизведения, реализация которых здесь обсуждаться не бу- 
дет. Полностью исходный код Објесіуіеуег молено скопировать с УМ -узла, 
посвященного данной книге. 

Итак, мы практически полностью решили задачу автоматизации пред- 
ставления модели. Для того чтобы объекты модели были видимыми, 
нам осталось лишь связать свойства објМіемЅ$рес с прототипами. Объект 
РІапеї, показанный на рис. 4.7, содержит в составе конструктора следую- 
щее'выражение: 

еһҺіѕ.орјУіеибрес= [ 

{пате : "паме", Суре: "ѕітр1е"}, 
{пате:"аӢіѕіапсе", їуре:"ѕітрі1е", 
еаітаб1е:їгие}, 
{пате:"аіатеїег", туре: "ѕітріе", 
еаіѓабІе:ігие}, 
{пате:"ітаве", туре: "1тазе игі" }, 
{пате:"Ғасіѕ", їуре:"аггау", ааамеҗж:1һіѕ.пемЕасї, 

іпііпе:ігие } |; 

Для данной спецификации использован принцип записи ]ЗОМ (ЈауаЅсгірі 
оБесф поайоп). Квадратные скобки обозначают числовой массив, а фигур- 
ные скобки — ассоциативный массив объектов (на самом деле оба типа мас- 
сивов реализуются одинаково). Более подробно мы обсудим ЈЅОМ в прило- 
жении Б. 

В данном фрагменте кода остались некоторые выражения, которые мы 
еше не рассмотрели. Например, что означают ад4М\ем, іпііпе и ед ца е? 
Они оповещают представление о том, что данные разделы модели могут не 
только просматриваться, но и модифицироваться пользователем, а это об- 
ласть ответственности контроллера. Использованию контроллера посвящен 
следующий раздел. 
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4.5.3. Включение контроллера 
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ЛИСТИНГ 4.15. Функция гепдегб1ир1е () 


ор) утемег . РгорегіуУіеиег . ргоёсоіуре . гепаег$1пр1е=ЕапсЕ1оп 
уаг уа1ріу=доситепі . сгеаёсеЕ1етмепі ("Яіу"); 
// Отображение значения, предназначенного для чтения 
уаг уа1Тхі=аосопепі 
. сгеаіеТехіМоде (ЁҺіѕ.уа1пџе) ; 
уа1ріу.аррепасћһі1а (уаітхі); 
// О Если допустимо редактирование, 
// добавляются интерактивные средства 
1Е (Еһ1іѕ.ѕрес.едйіёар1е) { 
уа1ріу.с1аѕѕмМате+=" едіёар1е"; 
уа1ріу.уіеимег=ёһіѕ; 

















уа1ріу.опс1іск=орј уіеиег.Ргорегёууіеиег. 
} 


геіџгп уа1ріу; 





} 


// © Начало редактирования 
ору утемег.РгхорегеуУ\У1емег. 





аї1іѕ5іпр1еРгорегёу= Ёопсііоп (е) { 


уар уіеимег=Еһіѕ.уіеиег; 
1Е (уіеиег) { 
уіемег.еаіі (); 
} 
} 
ор) уіеиег . Ргорегіууіеиег . ргоіоіуре.еаіё= Ёџпсііоп () { 
1Е (Еһіѕ.іуре=орјуіеиег.ТҮРЕ ЅІМРІЕ) { 
уаг едаііог=аосотепі . скеаёсеЕ1етмепё ("іприё") ; 
едііог.уа1џое=ёһіѕ.уа1пе; 
досотепё . роду .аррепасћһі1а (еаііог) ; 
уаг ёа=Еһіѕ.уа1та; 
хреЕЕ (едіёог,хІеѓі (ра) ); 
хТор (еаіёог,хтор (а) ) ; 
хиіаёЬ (еа1ёог,хиіаёһ (ёа) ) ; 
хНеідћё (еа1ёог,хНеідћһё (ёа) ); 
// © Замена метки на поле редактирования 
са. гер1асесћһі1а (еЯ1еох, ка. #їігѕёсһі1а); 
// О Связывание обработчика обратного вызова 

















код, используемый для воспроизвел 





ения 


(7 { 


аїііѕіпр1ерРгорегіу ; 
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еЯ1Еог.опо1ак=оЪ)у1емег. 

РгорегЕсу\У1емег .ея1еВ1аг; 
едііог.уіемег=Еһіѕ; 
едіёог. Ёосиѕ (); 


} 
// © Окончание редактирования 
о] утемег .Ргорегеу\У1емек 
„.еа1ЕВ1ак=РоосЕтолт (е) { 
уаг уіеиег=һіѕ.уіеиег; 
1Е (уіеиег) { 
уіемег . соігапіёЕа1ё (һіѕ.уа1п0е); 








} 
орјуіемег . Ргорегіууіеиег .ргобобуре . соши1 Е Е91Е=ЕопсЕ1оп (уа1ае) { 
1Е (Еһ1ѕ.буре==орјуіеиег.ТҮРЕ ЅІМРІЕ) { 
Еһіѕ.уа1џе=уа1пџе; 
уак уа1ріу=Еһ1іѕ.кепаегЅітпр1е (); 
уаг ЕЯ=ЕЮ1$.уа1тТа; 
са. гер1асесһі1а (уа1ріу, іа. #ікѕісһі1а) ; 
// О Оповещение обработчиков 
еҺ15ѕ.орј есіуіеиег 
.поєі ҒуСҺапде (611$); 














Процесс редактирования свойства включает несколько этапов. Прежде 
всего нам надо связать обработчик опсі1іск с элементом РОМ, отображаю- 
щим значение О. Понятно, что необходимость в этом возникает лишь тогда, 
когда свойство является редактируемым. Мы также связываем имя класса 
С85 с полями, допускающими редактирование, в результате эти поля из- 
меняют цвет при попадании на них курсора мыши. Это сделано для то- 
го, чтобы пользователь имел информацию о том, что данное поле допуска- 
ет редактирование. 


Функция ейііЅітрІеРгоретгїу() © представляет собой простой обработ- 
чик событий. Он извлекает из узла РОМ, на котором пользователь щелкнул 
мышью, ссылку на объект РгорегіуМіемег и вызывает метод еа1{(). Способ 
связывания представления с контроллером знаком вам по разделу 4.3.1. Мы 
проверяем корректность типа свойства, а затем заменяем метку, допускаю- 
шую только чтение, полем НТМГ-формы соответствующего размера, обес- 
печивающим редактирование. В этом поле отображается значение свойства 
©. Мы также связываем с текстовой областью обработчик оп шг О, кото- 
рый заменяет редактируемую область меткой, допускающей только чтение 
©, и обновляет модель. 


Таким образом, мы можем обрабатывать модель, но в общем случае при 
обновлении модели бывает необходимо выполнять другие действия. В этом 
случае включается в работу метод поііѓуСһапреО объекта ОБ ј есіМіемег 
©, вызываемый из функции соттИиЕай (). Соответствующий код показан 
в листинге 4.16. 


Листинг 4.16. Функция Орјесіуіемег.поёіғуСһапде () 
орј уіемег.ОЮрј есіУіемег.ргоїоїуре 
. посі ҒуСпапде=Ёоџпсііоп (ргорУіемег) { 
1Е (ЕһҺ1і5.опсһапдеКопіег) { 
$15 .опсрапдевочеет . поі Ғу (ргоруіемег); 
} 
1Е (ЕһҺіѕ.рагепіорјуіемег) { 
єһіѕ.рагепіорјуіемег. поі ҒуСҺапде (ргоруУіемег) ; 
} 
} оБ] уІемег.ОБј есїУ1емег.ргоѓоѓуре 
.аїасһапве[ 15(епег=Ёоипсіїоп(1ѕпг) { 
1Е (161$. опсбапзеВочеег) { 
(1$ .опсһапоеКооѓег=пеу 
јѕ Еуепі. Еуеп (К оцег(101$, "опсһапее"); 





15 .опсһапееКопоѓег.ааа1 1ѕ(епег(1ѕпг); 
} оБј межег. ОБ] есЕУ1емег.ргогогуре 
тетоуеСВапееГ,15{епег=РапсНоп (1$ пт) { 
1Е (151$. опсБапзеВощеет) { 
(01$. опсвапгеКоцщег.гетоуеГ. 1$ епег(15пг); 


} 
1 





Проблема, с которой мы столкнулись, а именно оповещение процессов 
об изменениях в модели, идеально решается посредством образа разработки 
Обѕегуег и объекта ЕуепіКоцѓег, о котором шла речь в разделе 4.3.3. Мы мог- 
ли бы связать ЕуепіКоцќег с событием оп г редактируемых полей, однако 
сложная модель обычно предполагает большое их количество, а наш код не 
имеет доступа к деталям реализации ОБ] есіМіемег. 

Вместо этого мы определим в ОбјесіМіеуег событие специального ти- 
па, опсрапзе, и свяжем с ним Еуе{Кощег. Поскольку наши объекты ОБ- 
јесіМіеуег включены в состав древовидной структуры (это сделано для про- 
смотра свойств, представляющих собой объекты и массивы), событие оп- 
сһапве должно передаваться родительским объектам. В общем случае мы 
можем присоединить обработчик к корневому объекту ОБ есіУіеуег, кото- 
рый мы создаем в приложении, и получать изменения свойств модели на 
более нижних уровнях. 

В качестве простого примера можно привести обработчик событий, ко- 
торый отображает сообщение в строке состояния браузера. Объект верхнего 
уровня в модели планет — это солнечная система, поэтому мы можем напи- 
сать следующий код: 

уаг їоруіеу=пеу обмежег.ОШесе\Уемег 


(рІапеїѕ.ѕоІагЅуѕіет ,таіпріу); 
іоруіеж.аааСһапеве[ іѕіепег(еѕі1 іѕќепег); 


где іеѕ1іѕїепег — функция поддержки события, которая выглядит следу- 
ющим образом: 


Ғопсйоп їеѕі1іѕіепег(ргоруіемег){ 
міпаом.ѕѓаіиѕ=ргоруіемег.пате+" ["+ргоруіемег.ќуре+"Ј = 
"+ргоруіежег.уаіие; 
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Конечно, на практике при изменении модели выполняются более сложные 
действия, например обращение к серверу. В следующей главе мы рассмотрим 
способы взаимодействия с сервером и передачи ему объекта ОБесмемег 
для дальнейшего использования. 


4Л Резюме 


"Модель-представление-контроллер" — это архитектурный шаблон, который 
в классических \еБ-приложениях обычно применяется к программам, распо- 
лагаемым на стороне сервера. Мы продемонстрировали использование этой 
архитектуры для серверной части Ајах-приложения, генерирующей данные 
для клиента. Мы также применили этот подход при разработке клиент- 
ских программ, причем в процессе работы было найдено несколько интерес- 
ных решений. 

Рассматривая подсистему представления, мы продемонстрировали эф- 
фективный способ отделения ее от логики. Полученные результаты позво- 
ляют дизайнерам и программистам работать практически независимо друг 
от друга. Такая организация кода позволяет привести его в соответствие со 
структурой рабочей группы и квалификацией участников разработки, что, 
несомненно, положительно скажется на производительности труда. 

Говоря о контроллере, мы обсудили различные модели поддержки собы- 
тий и приняли решение придерживаться старой модели. Несмотря на то что 
она позволяет определять лишь одну функцию обратного вызова для каждо- 
го события, мы научились применять образ разработки Обѕегуег для созда- 
ния гибких обработчиков, допускающих изменение конфигурации. Это уда- 
лось сделать на базе стандартной модели событий Јауа$сгірї. 

Что касается модели, то мы сделали первые шаги по пути создания рас- 
пределенного многопользовательского приложения. Разговор на эту тему бу- 
дет продолжен в главе 5. 

Для создания модели, представления и контроллера приходится затрачи- 
вать много усилий. Обсуждая объект Објесїуіемег, мы выяснили, что суще- 
ствуют способы, позволяющие автоматизировать взаимодействие элементов 
архитектуры МУС. Мы создали простую систему, способную представлять 
модель и позволяющую пользователю взаимодействовать с ней. 

Разговор об образах разработки мы продолжим в следующей главе. В ней 
мы перейдем к рассмотрению взаимодействия клиента и сервера. 


4.7. Ресурсы 


Библиотека Веһауіоиг, использованная в данной главе, находится по адре- 
су һїір://тірсога.со.пх/беһауіоиг/. Библиотеку х Майка Фостера можно 
скопировать, обратившись к серверу ВИр://\м\\.сгоз5-Бго\зег.сот. 
Попытки реализовать автоматическую генерацию представления на ос- 
нове модели были предприняты в рамках проекта М№акеа Објесіѕ (һїїр:// 
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муү%ү.пакейобјесіѕ.огә/). Книга Ричарда Посона (Кісһага Рамѕоп) и Роберта 
Метьюса (Кобегі МаИПемз) Маке ОБес5 (Јоһп УШеу Ф Ѕопѕ, 2002) немного 
устарела, но в ней можно найти полезные сведения, касающиеся разработки 
компонентов архитектуры "модель-представление—контроллер". 

Изображения планет, использованные для демонстрации возможностей 
Објесі Міемег, были предоставлены Јіт!'ѕ Соо! Ісопѕ (һр: / /ѕпацеһі.сот/ 
јипѕСооісопѕ/) и, как сказано на Мер-узле, смоделированы с помощью 
РОУ-Кау, а в качестве текстуры использованы реальные изображения, по- 
лученные от МАЗА. 





Роль сервера" Та 
Ајах-приложепия 





В этой главе... 


• Использование существующих архитектур 
в Ајах-приложении 


• Обмен содержимым, кодом сценариев 
и данными с сервером 


. Передача обновленных данных серверу 


• Объединение нескольких запросов 
в одном НТТР-обращении 
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В данной главе мы завершаем работу над созданием надежного и мас- 
штабируемого приложения, которая была начата в главе 4. Мы переходим от 
общих принципов к конкретным программам, которые сможем применить на 
практике. В главе 4 обсуждались способы структуризации клиентского кода, 
позволяющие достичь поставленной цели, а сейчас речь пойдет о программах, 
расположенных на стороне сервера и взаимодействующих с клиентом. 

Вначале мы рассмотрим функции, выполняемые сервером, затем обсу- 
дим варианты архитектуры, реализованные в инструментах, предназначен- 
ных для создания программ на стороне сервера. На сегодняшний день в рас- 
поряжении разработчиков, особенно тех, кто использует Јауа, имеется целый 
ряд инструментальных средств. Мы не будем рассматривать их все, а об- 
судим лишь общие подходы, использованные при их создании, и преимуще- 
ства, которые они предоставляют при разработке программ. Большинство 
инструментов предназначено для генерации классических М№еБ-приложений, 
поэтому мы постараемся выяснить, насколько они применимы для Ајах. 

Помимо рассмотрения общих вопросов, связанных с работой приложе- 
ния, мы также уделим внимание деталям взаимодействия клиента и серве- 
ра. В главе 2 вы получили основные сведения об объекте ХМЕНирКеаие$ 
и скрытых фреймах. В данной главе мы вернемся к этому вопросу и обсудим 
использование различных образов разработки для передачи данных клиенту 
и выясним, есть ли альтернатива разбору ХМГ-документов с применением 
методов РОМ. В последнем разделе мы представим систему управления тра- 
фиком, связанным с обменом между клиентом и сервером в процессе работы 
приложения. На стороне клиента будет находиться очередь запросов, а на 
стороне сервера — процессы для их обработки. 


Итак, рассмотрим роль сервера в Ајах-приложении. 


5.1. Программы, выполняемые на сервере 


В процессе работы Ајах-приложения сервер выполняет две основные функ- 
ции, которые имеют существенное отличие. Прежде всего, он доставляет при- 
ложение браузеру. Мы считаем, что в процессе доставки данные не претерпе- 
вают изменения, поэтому реализуем средства, предназначенные для выполне- 
ния на стороне клиента, как набор файлов „Вт, .езз и .јѕ. С передачей их 
клиенту справится даже самый простой сервер. Такое решение вполне жиз- 
неспособно, но оно не единственное. Существуют альтернативные варианты. 
Средства, предназначенные для создания серверных программ, мы подробно 
обсудим в разделе 5.3. 

Вторая задача сервера — это взаимодействие с клиентом, т.е. обработ- 
ка запросов и подготовка ответов. Поскольку НТТР — единственный воз- 
можный в данной ситуации транспортный механизм, взаимодействие всегда 
должно начинаться по инициативе клиента. Сервер может только отвечать. 
В главе 4 мы говорили о том, что Ајах-приложение должно поддерживать мо- 
дель предметной области как на стороне клиента (для обеспечения быстрого 
отклика), так и на стороне сервера (для доступа к ресурсам, например, к базе 
данных). Синхронизация этих моделей — сложная задача, и клиент без по- 
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мощи сервера не может справиться с ней. Вопросы работы сервера будут рас- 
смотрены в разделе 5.5; там же предложены решения данной проблемы, осно- 
ванные на использовании одного из образов разработки, описанных в главе 3. 

Прочитав данную главу, вы узнаете, что доставить приложение клиенту 
и организовать взаимодействие с ним можно различными способами. Суще- 
ствует ли наилучшее решение? Можно ли обеспечить взаимную поддерж- 
ку? Как различные решения будут работать с уже имеющимся программным 
обеспечением? Чтобы ответить на эти вопросы, необходимо описать возмож- 
ности, имеющиеся в нашем распоряжении. Это мы постараемся сделать в дан- 
ной главе. Рассмотрим варианты участия сервера в работе У\еБ-приложения 
и особенности, связанные с применением инфраструктуры Ајах. 


5.2. Создание программ на стороне сервера 


В традиционных Меб-приложениях программы, выполняющиеся на стороне 
сервера, обычно достаточно сложны. Именно они определяют особенности 
работы пользователя и хранят информацию о текущем состоянии. Прило- 
жение, как правило, ориентировано на определенный язык взаимодействия 
и учитывает ряд соглашений, которые задают порядок его работы. Возмож- 
ные языки могут определяться архитектурой, операционной системой или 
аппаратными средствами. Выбор среды программирования — важный шаг 
в создании программ, поэтому рассмотрим возможности, имеющиеся в рас- 
поряжении разработчика. 


5.2.1. Популярные языки программирования 


Для создания программного обеспечения, предназначенного для выполнения 
на стороне сервера, могут использоваться различные языки. Несмотря на то 
что вся история всемирной сети очень коротка, отношение разработчиков 
к тем или иным языкам программирования не раз изменялись. В настоящее 
время чаще всего используются РНР, Јауа и классическая технология АЗР; 
также становятся все более популярными АЗР.МЕТ и Кобу. Эти названия, ко- 
нечно же, знакомы большинству читателей. Ајах имеет дело преимуществен- 
но с клиентским программным обеспечением, которое может взаимодейство- 
вать с серверными программами, написанными на любом из этих языков. 
Более того, при использовании Ајах не столь важно, какой именно язык при- 
менялся при создании серверных программ. В результате упрощается перенос 
Ајах-приложений с одной платформы на другую. 

Часто базовые средства, используемые при написании серверной части 
Ајах-приложения, становятся более важными, чем язык реализации. Архи- 
тектура и базовые средства определяют структуру приложения и функции 
его основных компонентов. Для создания классических У\еБ-приложений бы- 
ли разработаны различные архитектуры, однако поскольку жизненный цикл 
Ајах-приложений отличается от классического варианта программ, не все 
архитектуры оказываются пригодными. Вопросы разработки серверных про- 
грамм и используемые при этом средства описаны далее в этой главе, а сейчас 
Мы рассмотрим базовые принципы У -архитектуры. 
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5.2.2. М-уровневые архитектуры 


Одним из основных понятий, используемых при разработке распределенных 
приложений, является уровень (ег). С одной стороны, уровень определяет 
круг вопросов, за решение которых отвечает приложение, а с другой — опи- 
сывает изолированную подсистему, работающую на отдельной машине либо 
оформленную в виде отдельного процесса. Этим понятие уровней отличается 
от понятия ролей в архитектуре МУС. Модель, представление и контроллер 
не являются уровнями, поскольку они реализованы в рамках одного процесса. 

Первые распределенные системы насчитывали два уровня — клиентский 
и серверный. Уровень клиента обычно располагался на настольной системе 
и взаимодействовал с серверным уровнем по сети. Для организации взаимо- 
действия использовались сокеты, поддержка которых была реализована в ви- 
де библиотеки. В большинстве случаев серверный уровень является сервером 
базы данных. 

Первые системы УеБ включали браузер, взаимодействующий с МеБ- 
сервером. Сервер обычно отвечал за передачу браузеру файлов, находящихся 
в файловой системе серверной машины. 

По мере развития и усложнения У\е5-приложений потребовался доступ 
к базам данных. Двухуровневая модель "клиент/сервер" уступила место трех- 
уровневой модели, в которой сам МеБ-сервер занял место промежуточного 
уровня между клиентом и СУБД. Дальнейшее развитие привело к выделе- 
нию на промежуточном уровне средств представления и бизнес-логики. Они 
реализовывались либо в виде отдельных процессов, либо как модули в составе 
одной программы. 

Современное М№еБ-приложение обычно имеет два основных уровня. Уро- 
вень бизнес-логики моделирует предметную область и непосредственно вза- 
имодействует с базой данных. Уровень представления получает данные от 
средств бизнес-логики и представляет их пользователю. Браузер занимает 
в этой системе место низкоуровневого клиента. 

С появлением Ајах стал развиваться клиентский уровень. Если ранее 
средства представления полностью отвечали за поддержку работы поль- 
зователя, то сейчас их функции разделились между сервером и клиентом 
(рис. 5.1). Роль уровня представления на стороне сервера стала менее важ- 
ной, поскольку некоторые вопросы обеспечения последовательности действий 
при работе пользователя полностью решаются на уровне клиента. Соответ- 
ствующие программные средства создаются на языке ЈауаЅсгірі и работают 
в среде браузера. 

Этот новый уровень предоставляет новые возможности, которые мы уже 
обсуждали в предыдущих главах. Однако вместе с тем он создает предпосыл- 
ки для усложнения программ, в результате чего при разработке могут воз- 
никать дополнительные проблемы. Нам надо знать, как справиться с ними. 
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Рис. 5.1. В Ајах-приложении некоторые функции уровня представления 
переместились со стороны сервера на сторону клиента. В результате 
возник новый уровень — клиентский уровень представления 


5.2.3. Управление моделью предметной области на стороне 
клиента и на стороне сервера 


В приложении Ајах нам по-прежнему необходимо моделировать предметную 
область на сервере, "в непосредственной близости" от базы данных и других 
жизненно важных ресурсов. Однако для того, чтобы клиентская програм- 
ма могла обеспечить быстрый отклик на действия пользователя, она долж- 
на обладать определенным "интеллектом", а это требует наличия на стороне 
клиента хотя бы частично реализованной модели. В результате возникает 
проблема синхронизации этих двух моделей. 

Добавление дополнительного уровня всегда связано с увеличением слож- 
ности и возрастанием накладных расходов при взаимодействии. К счастью, 
данная проблема не нова. Аналогичные трудности возникали при разработ- 
ке Меб-приложений средствами Ј2ЕЕ, где были строго разделены уровень 
бизнес-логики и уровень представления. Модель предметной области под- 
держивается средствами бизнес-логики. К ней обращается уровень представ- 
ления, на котором затем генерируется содержимое УеБ-страниц, передава- 
емых браузеру. В Ј2ЕЕ проблема была решена путем применения обгектов 
передачи (ітапѕѓег објесіѕ), которые представляют собой обычные объекты, 
передаваемые между уровнями. Они представляют уровню представления 
ограниченный доступ к модели предметной области. 


Однако Ајах ставит новые задачи. При использовании технологии Ј2ЕЕ 
оба уровня реализовывались на одном и том же языке. Более того, в распоря- 
жении разработчика был механизм удаленных процедур. При создании при- 
ложения Ајах такие условия, как правило, обеспечить невозможно. В прин- 
ципе можно применить для'написания программ на стороне сервера язык 
ЈауаЅсгірі, однако такой подход нельзя назвать общепринятым, да и к тому 
же остается задача взаимодействия двух Јауа$сгірі-программ. 

При организации взаимодействия уровней приходится решать две основ- 
ные задачи: чтение данных с сервера и запись их на сервер. Подробно они 
рассмотрены в разделах 5.3-5.5. Перед тем как завершить разговор об ар- 
хитектуре, мы должны рассмотреть основные принципы создания серверных 
программ, используемых в настоящее время. В частности, нас интересуют во- 
просы формирования модели предметной области, организации доступа к ней 
с уровня представления и ограничения, которые могут возникнуть при ис- 
пользовании Ајах. 
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Согласно данным исследований (ссылка на соответствующий обзор при- 
ведена в конце данной главы) в настоящее время только для Јауа существует 
более 60 вариантов базовых средств разработки (по правде говоря, такое оби- 
лие предложений скорее мешает, чем помогает в работе). Большинство из них 
различается лишь в деталях, и, независимо от языка реализации серверных 
программ, мы можем выделить для уровня представления несколько основ- 
ных архитектурных принципов. Рассмотрим их. 


5.3. Принципы создания программ на сервере 


Базовые средства, применяемые для разработки программ на стороне сер- 
вера, важны для Ајах-приложений. Если код клиента генерируется на базе 
модели, поддерживаемой на сервере, их значение еще более возрастает. Если 
мы вручную создадим код клиента и оформим его в виде статических НТМГ- 
документов, содержащих ЈауаЅсгірі-код, то базовые средства не будут участ- 
вовать в доставке приложения, но данные, требуемые приложению в процессе 
работы, по-прежнему должны генерироваться динамически. Как было ска- 
зано ранее, программы на стороне сервера обычно разделяются на два уров- 
ня: модель предметной области и представление. В случае Ајах-приложения 
средства представления выполняют роль посредника между моделью и кли- 
ентской частью. Для того чтобы приложение работало эффективно, надо 
правильно организовать взаимодействие клиента и сервера, а для этого необ- 
ходимо знать архитектуру серверных программ и, возможно, инструменты, 
применявшиеся при их создании. 


Некоторые всерьез считают сервер в составе У\еб-приложения игрушкой 
в руках разработчика. Проблема поддержки работы пользователя посред- 
ством набора У\еБ-страниц и обращения к другим системам на сервере, напри- 
мер СУБД, еще не решена по-настоящему. У\еб буквально наводнена неудач- 
ными системами и утилитами, а новые проекты появляются каждый месяц, 
а то и каждую неделю. 

К счастью, среди этих разнообразных проектов можно выделить группы 
со сходными характеристиками. Анализируя основные подходы, можно опи- 
сать четыре основных способа решения задач, поставленных перед сервером. 
Рассмотрим их и выясним, подходят ли они для нашей Ајах-модели. 


5.3.1. Серверные программы, не соответствующие 
основным принципам разработки 


Самая простая архитектура — это отсутствие таковой. Создание приложения 
без учета основных принципов разработки не обязательно означает отсут- 
ствие порядка. Возможно, в приложении будут удачно определены основные 
этапы работы пользователя и организовано обращение к ресурсам. Многие 
\еБ-узлы созданы именно таким образом. Каждая страница генерирует свое 
собственное представление и по-своему обращается к базе данных и другим 
системам. Во многих случаях при создании подобных приложений применя- 
ются библиотеки и вспомогательные функции. Приложение, созданное по- 
добным образом, условно показано на рис. 5.2. 
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Рис. 5.2. Мер-программа, созданная без учета основных принципов разработки. 
Каждая страница, сервлет или СС!-сценарий поддерживает собственную логику 
и особенности представления данных. Вспомогательные методы и объекты могут 
инкапсулировать низкоуровневые функции общего назначения, например 
обращение к базе данных 


Применить данный подход для Ајах-приложения достаточно просто, при 
условии, что код клиента создается вручную. Генерация клиентской програм- 
мы сервером — сложная задача, и ее рассмотрение выходит за рамки данной 
книги. Для доставки клиента надо определить основную страницу, содержа- 
щую ЈауаЅсгірі-код, таблицы стилей и другие ресурсы. Для доставки данных 
нам надо лишь заменить НТМТ-документы, генерируемые сервером, ХМГ- 
данными или информацию в другом формате. 

Главный недостаток подобного подхода в классическом УеБ-приложении 
состоит в том, что связи между документами распределены в коде самих 
документов. По этой причине средства, выступающие в роли контроллера, 
не локализованы. Если разработчику надо изменить порядок представле- 
ния У\еБ-страниц пользователю, ему необходимо изменять гипертекстовые 
ссылки в различных местах. Ситуацию можно несколько улучшить, поме- 
щая фрагменты данных, содержащих большое количество ссылок, например 
средства навигации, во включаемые файлы или генерируя их посредством 
вспомогательных функций, однако стоимость сопровождения все равно бу- 
дет резко возрастать по мере усложнения приложения. 


В Аах-приложении проблема, возможно, будет не столь острой, посколь- 
ку гипертекстовые ссылки в этом случае встречаются несколько реже, од- 
нако включение инструкций и перенаправление их между страницами все 
равно усложнит разработку. В простых ХМГ-документах включение и пере- 
направление не требуется, но в приложениях большого объема может возни- 
кать необходимость в пересылке документов со сложной структурой, сфор- 
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Рис. 5.3. Архитектура Модеі2. Единственная страница контроллера или 
единственный сервлет получает все запросы и распределяет их в соответствии 

со схемой работы пользователя. Запрос может быть передан для обработки 
вспомогательным классам или функциям и перед пересылкой браузеру передается 
компоненту, выполняющему роль представления (например, ЈЅР- или 
РНР-документу) 


мированных в результате совместной работы нескольких процессов. В ранних 
разработках для преодоления данной проблемы использовалась архитектура 
МУС. Приложения, созданные по такому принципу, часто встречаются в на- 
стоящее время. 


5.3.2. Использование архитектуры Моае!! 


Образ разработки Мо4е|2 является разновидностью МУС. Отличается он 
тем, что контроллер имеет единственную точку входа и единственное опре- 
деление последовательности действий пользователя. В применении к МеБ- 
приложению это означает, что одна страница контроллера или один сервлет 
отвечает за маршрутизацию большинства запросов, передавая их различ- 
ным службам и пересылая полученные данные представлению. Среди ба- 
зовых наборов средств, поддерживающих Мойе12, наиболее известным яв- 
ляется Арасһе 51ги{5. Данной архитектуре также соответствует ряд других 
инструментов для Јауа и РНР. Нарис. 5.3 условно показано Међь-приложение, 
соответствующее архитектуре Моде[2 


Как же применить данный принцип разработки к серверному приложе- 
нию, взаимодействующему с клиентом Ајах? Мо4е!2 практически никак не 
определяет доставку клиентского приложения, потому что обычно она про- 
изводится в начале работы и выполняется практически одинаково для всех 
пользователей. Централизованный контроллер может участвовать в процессе 
аутентификации, однако этот факт не влияет на доставку. 
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Данная архитектура хорошо подходит для доставки данных. Представ- 
ление, созданное в рамках архитектуры Мо4е!2, практически не зависит от 
базовых средств, и мы можем без труда заменить НТМЕ на ХМЕ или другой 
формат. Часть функций контроллера передается уровню клиента, но другие 
функции реализуются на стороне сервера посредством отображения. 

Архитектура Мо4е!2 предоставляет классическому МеБ-приложению 
средства для выражения функций контроллера на высоком уровне абстрак- 
ции, однако представление при этом обычно реализуется вручную. Дру- 
гие принципы разработки дают возможность использовать высокоуровневые 
средства и для создания представления. 


5.3.3. Использование архитектуры на базе компонентов 


При создании НТМГ-страницы для классического У\еб-приложения в рас- 
поряжении автора имеется ограниченный набор компонентов пользователь- 
ского интерфейса — обычно этот набор исчерпывается элементами НТМІ- 
формы. Их возможности остаются неизменными уже около десяти лет, и они 
существенно проигрывают современным инструментам, предназначенным 
для создания интерфейсов. Если автор захочет реализовать нечто вроде дре- 
вовидной структуры или таблицы с редактируемыми ячейками, он вынужден 
будет заняться низкоуровневым программированием. Это не идет ни в какое 
сравнение с уровнем абстракции, доступным разработчику, создающему про- 
граммы для настольной системы и имеющему в своем распоряжении такие 
инструменты как МЕС, СТК+, Сосоа, Ѕ№уіпе или Оі. 


Компоненты для Мер 


Принцип разработки, ориентированный на использование компонентов, по- 
вышает уровень абстракции при программировании пользовательских интер- 
фейсов. В этом случае в распоряжение разработчика серверных программ 
предоставляются элементы, интерфейс которых не уступает компонентам 
графического интерфейса для настольных систем. В процессе воспроизведе- 
ния компонентов, предназначенных для настольных систем, осуществляется 
рисование в графическом контексте. При этом осуществляются низкоуров- 
невые обращения к средствам генерации графических примитивов, напри- 
мер, геометрических фигур, битовых карт и т.д. Воспроизведение компонен- 
тов для УеБ предполагает автоматическую генерацию потока НТМІ -данных 
и ЈауаЅсгірі-программ. В результате в среде браузера реализуются функции, 
типичные для настольных систем, и программист избавляется от необходи- 
мости выполнять операции на низком уровне. На рис. 5.4 условно показан 
принцип разработки, основанный на использовании компонентов. 


Многие архитектуры на базе компонентов описывают взаимодействие 
с пользователем в терминах, применяемых при работе на настольных си- 
стемах. Так, например, с компонентом ВиЙоп может быть связан обработ- 
чик события, соответствующего щелчку мыши, поле редактирования может 
иметь обработчик уамеСВапэе и т.д. В большинстве архитектур обработка 
событий делегируется серверу посредством запроса, который формируется 
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Рис. 5.4. Архитектура, основанная на использовании компонентов. Приложение 
описывается как набор компонентов, для воспроизведения которых браузеру 
передается поток НТМЕ-данных и ЈауаЅсгірї-программ Каждый компонент 
содержит собственные "микрореализации" модели, представления и контроллера. 
Контроллер более высокого уровня обрабатывает запросы браузера к отдельным 
компонентам и модели предметной области 


в ответ на действие пользователя. В "интеллектуальных" архитектурах об- 
работка событий осуществляется незаметно для пользователя, а в других 
при возникновении каждого события обновляется вся страница. Как прави- 
ло, в приложениях, созданных в виде набора компонентов, взаимодействие 
с сервером осуществляется более эффективно по сравнению, например, с при- 
ложениями Мойе12. 

Одна из целей, преследуемых архитектурой, о которой идет речь, — это 
формирование различных типов пользовательского интерфейса на базе еди- 
ного описания. Некоторые наборы базовых средств, например М№Міпаӣоуѕ Еогтѕ 
для .МЕТ или ЈЅЕ (ЈауаЅегуег Еасеѕ), обеспечивают такую возможность. 
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Применимость архитектуры на базе компонентов для Аах-приложений 


Как же сочетается архитектура на базе компонентов с Ајах? На первый 
згляд, взаимодействие должно быть органичным, поскольку оба подхода 
предполагают переход от интерфейса на основе документов к использованию 
компонентов. Может показаться, что данную архитектуру целесообразно при- 
менять для Ајах-приложений, в особенности тогда, когда клиентские сред- 
ства генерируются программой и существуют включаемые средства воспро- 
изведения, поддерживающие Ајах. Такой подход выглядит весьма привлека- 
тельным, поскольку в этом случае исчезает необходимость специального изу- 
чения разработчиками особенностей языка ЈауаЅсгірі и существует возмож- 
ность реализовать систему воспроизведения на базе обычного НТМГ-кода. 

Подобное решение хорошо подходит для тех приложений, для которых 
требуются лишь стандартные типы компонентов. Тем не менее некоторая 
степень гибкости все же теряется. Успех Соое Марѕ (см. главу 1) в значи- 
тельной степени обусловлен тем, что для данной системы определен собствен- 
ный набор компонентов, от прокручиваемой карты до элементов масштаби- 
рования и всплывающей подсказки. Реализовать ту лее систему, используя 
стандартный набор компонентов, типичных для настольной системы, было 
бы гораздо сложнее, и конечный результат наверняка получился бы гораз- 
до худшим. 


Интерфейс многих приложений вполне укладывается в привычный набор 
компонентов. Именно для них целесообразно применять рассматриваемую 
здесь архитектуру. Необходимость компромисса между гибкостью и удоб- 
ством разработки — общая проблема для многих решений, основанных на 
генерации кода. 

Для того чтобы архитектура была пригодной для Ајах-приложения, она 
должна обеспечивать эффективную передачу данных в процессе работы. 
Здесь проблемы могут оказаться более серьезными, так как контроллер жест- 
ко "привязан" к уровню сервера и определен с помощью выразительных 
средств, типичных для настольных систем. Для Ајах-приложения, способ- 
ного обеспечивать требуемый отклик на действия пользователя, необходимо 
иметь возможность определять собственные обработчики событий, которую 
сервер не всегда может предоставить. Однако данная архитектура имеет се- 
рьезные потенциальные возможности, и по мере возрастания популярности 
Ајах несомненно будут появляться новые решения. Система СоттапаОчете, 
которую мы рассмотрим в разделе 5.5.3, может стать существенным шагом 
по пути применения ЈЅЕ и других подобных технологий, однако на сегодняш- 
ний день она еще не готова. Имеющиеся же в наличии базовые средства не 
предоставляют клиентам той свободы, которую хотелось бы видеть. 


Будущее покажет, насколько хорошо удастся адаптировать системы на 
базе компонентов для Ајах. В настоящее время наблюдается рост интереса 
со стороны корпорации 5ип и некоторых поставщиков ЈЅЕ к инструментам, 
созданным с учетом Ајах. Поддержка некоторых функций, применимых для 
Ајах, уже реализована в .МЕТ Еогтз$; они также будут доступны в наборе 
инструментальных средств Ааѕ. (Ссылки на эти системы приведены в кон- 
Це главы.) 
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Может возникнуть вопрос: как должны выглядеть инструментальные 
средства, созданные специально для Ајах? На сегодняшний день таковых 
еще нет, но возможно, что они будут разработаны на основе какой-либо из 
существующих систем. 


5.3.4. Архитектуры, ориентированные на использование 
И/ер-служб 


Последняя архитектура из рассматриваемых в данной главе, — это ЗОА 
(ѕегуісе-огіепіеа агспИестаге), т.е. архитектура, основанная на использовании 
служб. В данном случае служба — это нечто, к чему можно обратиться по 
сети, и получить в качестве ответа структурированный документ. Основное 
внимание здесь уделяется не содержимому, а данным, что вполне соответ- 
ствует принципам Ајах. В настоящее время наиболее часто используются 
УеБ-службы, а ХМГ в качестве основного языка также с энтузиазмом вос- 
принимается разработчиками Ајах-приложений. 


На заметку Термин М№ебБ-служба можно понимать как в широком, так и в уз- 
ком смысле. №еб-служба в узком смысле — это средства, ис- 
пользующие протокол ЗОАР. М№еБЬ-служба в широком смысле — 
это любая система обмена данными, базирующаяся на прото- 
коле НТТР, независимо от того, применяется ли при ее рабо- 
те протокол ЗОАР или формат ХМІ. ХМГ-КРС, ЈЅОМ-КРС 
и любая система, которую вы разработаете, используя объект 
ХМЕНирКедие$, будет У\еб-службой в широком смысле. 


Используя М№МеБ-службу как источник данных, клиент Ајах может обес- 
печить высокую степень автономности, соизмеримую с той, какой обладает 
почтовый клиент, взаимодействующий с почтовым сервером. Возможности 
повторного использования элементов приложения превышают те, которые 
могут предоставить инструментальные средства, предполагающие использо- 
вание компонентов. Так, клиент определяется лишь единожды и экспорти- 
руется для различных интерфейсов. Служба также определяется один раз 
и может быть использована различными клиентами, работающими независи- 
мо друг от друга. Таким образом, сочетание ЗОА и Ајах может стать основой 
достаточно мощной системы. В этом случае разделяются средства, предна- 
значенные для генерации Ајах-приложений и для их обслуживания. 


Предоставление доступа к объектам на стороне сервера 


Многие инструментальные средства позволяют представить обычный объект, 
созданный на Јауа, С# или РНР, как У\еб-службу. При этом поддерживается 
отображение методов объекта в интерфейс №\еЫ-службы. Такую возможность 
предоставляют, в частности, Місгоѕой У151а| ЗиА1ю и Арасһе Ахіѕ Юг Јауа. 
Многие инструменты Ајах, например ОМК (для Јауа) и ЅАЈАХ (для РНР, 
.МЕТ, РуШоп и некоторых других языков), обеспечивают данную возмож- 
ность посредством клиентского кода, написанного на языке ЈауаЅсгірї. 
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Применение инструментальных средств может существенно помочь при 
здании приложения. Если же использовать их неумело, результат будет 
противоположным. Для того чтобы составить представление о правильном 
использовании инструментов, рассмотрим простой пример, в котором приме- 
няется Јауа ОМК. Мы определим объект на стороне сервера для предостав- 
ления персональной информации. 


раскаре сот.таппіпе.ај ахіпасііоп; 
роЫьис с1аѕѕ Регѕоп! 
ргіуаќе эише паше=пий; 
роьіс Регзоп(){ 
рир1іс бЕглпа дчеЕМаме () { 
тесип папе; 
} 
рор1іс уоіа зеЕМаме ($6 х1па паше) { 
еһіѕ.патме=пате; 


} 

Данный объект должен соответствовать спецификации ЈауаВеапѕ. Это 
означает, что он должен предоставлять конструктор, вызываемый без па- 
раметров, и обеспечивать доступ к требуемым полям для чтения и записи 
посредством реї- и ѕеі-методов. Далее мы сообщаем РУК о том, что данный 
объект должен быть доступен уровню Јауа$Ѕсгірі. Для этого мы редактируем 
файл аҹтг.хті. 

<@ми> 

<1016> 
<сопуегЕ іа="регѕоп" сопуегіег= "реап" 
таєсһ= "сом. тмаппіпао.ај ахіпасііоп.Рекѕоп" /> 
</іпіё> 
<а11ом> 
<сгеабсе сгеабог="пем" јауаѕсгјірё= "регѕоп"> 
<рагам паме="с1азз" 

уа1ае="сом.мапп1па.а) ахіпасііоп.Регкѕоп"> 

</схеабе> 
</а11ом> 

</@мх> 

В разделе іпі мы определяем средства преобразования нашего класса 
в тип Беап, а в разделе аПо\ определяем средства, представляющие данный 
объект Јауа$сгірі-программам в виде переменной регѕоп. Наш объект Регѕоп 
содержит только один общедоступный метод, эе Маше (), таким образом, мы 
можем включить в код клиента Ајах следующее выражение: 





уаг папе=регзоп .дееМаме () ; 


Затем можно получать требуемое значение с сервера в асинхрон- 
ном режиме. 

В нашем классе Регзоп содержится только один метод. На первый взгляд 
может показаться, что им и исчерпывается набор средств, которые предо- 
ставляются клиенту. На самом деле это не так. Класс Регѕоп является под- 
классом јауа.Іапе.ОБјесі и наследует от него ряд общедоступных методов, 
например һаѕһСойе () и їоѕїгіпе(). К ним также может производиться об- 
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ращение. Эти "скрытые" средства не являются специфическими для ОМК. 
Метод ЈЅОМКРСВгіаре. ге2151егОЪ]ес{ (), например, делает то же самое. Сле- 
дует заметить, что ОМК позволяет ограничить доступ к определенным ме- 
тодам, настраивая конфигурационный ХМІ-файл. Однако по умолчанию до- 
ступ предоставляется ко всем методам. Такая проблема типична для реше- 
ний, основанных на отражении. Мы встретились с ней в главе 4 при создании 
первых вариантов ОБ есїуіемег. Рассмотрим способы ее решения. 


Предоставление ограниченного доступа 


Если мы ненамеренно дадим возможность пользователям УеБ вычислять 
хэш-коды наших объектов, может ли это представлять опасность для нас? 
Для рассматриваемого примера, по-видимому, нет, так как суперклассом со- 
здаваемого нами класса является јауа.Іапв.Објесі, и эта ситуация вряд ли 
изменится. Для более сложных моделей, предоставляя информацию о суперк- 
лассе, мы не гарантируем, что программа в дальнейшем не подвергнется ре- 
структуризации. Вполне может получиться так, что разработчик клиентской 
программы захочет воспользоваться методами, доступ к которым вы непред- 
намеренно предоставили. Затем, когда реструктуризированная модель будет 
доставлена на сервер, программные средства на стороне клиента внезапно 
откажутся работать. Другими словами, такое решение препятствует коррект- 
ному разделению функций между клиентом и сервером. Если вы используе- 
те инструментальные средства, подобные ОМК или ЗОМ-КРС, вам следует 
тщательно взвешивать решения относительно состава интерфейса Адах. Воз- 
можно, вам даже придется создать нечто вроде объекта Еаса4е (рис. 5.5). 


Использование в данной ситуации образа разработки Еаса4е обеспечива- 
ет ряд преимуществ. Во-первых, как было сказано ранее, он позволяет без 
опасения реструктуризировать модель на стороне сервера. Во-вторых, такое 
решение упрощает общедоступный интерфейс, используемый клиентом. По 
сравнению с кодом, написанным для внутреннего применения, расходы на со- 
здание интерфейсов, предоставляемых другим элементам приложения, ока- 
зываются достаточно высокими. Необходимо создать полную документацию, 
иначе служба поддержки будет перегружена обращениями пользователей, 
пытающихся использовать созданный вами общедоступный интерфейс. 


Еще одно преимущество Еасае состоит в том, что данный образ раз- 
работки позволяет определять степень детализации предоставляемых услуг. 
Хорошая модель предметной области обычно содержит большое количество 
методов, выполняющих несложные действия. Таким образом, удовлетворяет- 
ся требование детального управления работой кода на стороне сервера. Ајах- 
клиент предъявляет к интерфейсу У’е5-службы совершенно другие требова- 
ния; они вытекают из наличия задержки, связанной с передачей данных по 
сети. Большое количество методов, решающих частные задачи, резко снизит 
практичность клиента, а сервер может не справиться с большим количеством 
запросов, передаваемых по сети. 


Различие требований к интерфейсу, предъявляемых клиентом и сервером, 
можно проиллюстрировать на примере. Сравним разговор с обменом пись- 
мами. (Говоря о письмах, мы имеем в виду не электронную почту, а именно 
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Рис. 5.5. Одна из систем предоставляет Ајах-клиенту все 
объекты как Интернет-службы, а при создании другой 
использован образ разработки Ғасаде, который гарантирует 
доступ лишь к ограниченному набору функций. Уменьшая число 
общедоступных методов, мы снижаем риск повредить клиентский 
код при реструктуризации серверных программ 


письма, написанные на бумаге, доставка которых занимает несколько дней.) 
Когда два человека беседуют, как минимум несколько фраз, которыми они 
обмениваются друг с другом, посвящено теме "как дела?". При написании 
письма никто не позволяет себе задать один подобный вопрос и ждать отве- 
та на него. Отправитель подробно описывает, как его здоровье, как он провел 
отпуск, какие новости он узнал недавно, — все это оформляется в виде одно- 
го документа. 

Путем объединения отдельных запросов, предназначенных для передачи 
по сети, в один большой документ архитектура, ориентированная на исполь- 
зование сетевых служб, позволяет более эффективно применять доступные 
сетевые ресурсы. Как правило, проблема быстродействия линий связи ре- 
шается проше, чем проблема задержки при передаче по сети. Существует 
также проблема выработки стандартов для передачи больших объемов дан- 
ных в формате ХМГ посредством знакомого всем протокола НТТР, но ее 
Мы рассматривать не будем. Если мы проанализируем возможности, предо- 
ставляемые Ајах, то увидим, что в нашем распоряжении есть встроенные 
в браузер средства поддержки НТТР и ХМГ, поэтому имеет смысл созда- 
вать распределенную модель предметной области на базе документов. 
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Типичный документ, например данная книга, состоит из абзацев, заголов-: 
ков, таблиц и рисунков. Аналогично, документ, содержащийся в обращении 
к службе, может содержать различные элементы, например, запросы, дан- 
ные для обновления и оповещения. Образ разработки Соттапа, который 
обсуждался в главе 3, позволяет представлять структуру документа в виде 
последовательности действий (которые при необходимости можно отменять), 
передаваемых между клиентом и сервером. Реализация подобной структуры 
будет рассмотрена далее в этой главе. 

На этом мы заканчиваем обсуждение архитектуры программного обес- 
печения на стороне сервера. На сегодняшний день ни об одном из ее вари- 
антов нельзя сказать, что он полностью удовлетворяет требованиям Ајах. 
Это и неудивительно, так как они разработаны для совершенно других ти- 
пов приложений. В настоящее время ведутся работы по реализации средств 
Ајах в существующих инструментах. Вероятно, в ближайшем будущем мож- 
но будет ознакомиться с результатами. Перед многими разработчиками стоит 
задача обеспечить взаимодействие средств Ајах с уже имеющимися система- 
ми. Мы будем рады, если анализ архитектур, проведенный в данной главе, 
поможет принять правильные решения. 


Предположим, что мы приняли решение в дользу той или иной архитек- 
туры и начали разработку Ајах-приложения. В главе 4 мы уже обсуждали 
архитектуру клиентской части приложения, а пример получения с сервера 
данных в формате ХМГ был рассмотрен в главе 2. ХМГ — удобный и попу- 
лярный, но не единственный возможный формат для обмена данными между 
клиентом и сервером. В следующем разделе мы обсудим все возможности ор- 
ганизации подобного взаимодействия. 


5.4. Частные решения: обмен данными 


В предыдущем разделе мы рассматривали глобальные архитектурные реше- 
ния и обсуждали вопрос о том, насколько они подходят для создания Адах- 
приложений. Мы постоянно подчеркиваем важность обмена данными между 
клиентскими программами и моделью предметной области, поддерживаемой 
на сервере. Прочитав материал, изложенный выше, можно сделать вывод, 
что, правильно выбрав базовые средства, мы автоматически решим последу- 
ющие задачи. Увы, это совсем не так. И вы в этом убедитесь, прочитав осталь- 
ную часть главы. Если мы внимательно рассмотрим вопрос обмена данными, 
то увидим, что для данной задачи существует множество решений. В после- 
дующих разделах мы кратко опишем их и попытаемся выяснить, какой язык 
наилучшим образом подходит для обмена данными в рамках приложения 
Ајах. Имея такую информацию, мы сможем принимать более обоснованные 
решения об использовании конкретных средств. 


Задача обмена данными между программами, составляющими приложе- 
ние Ајах, не имеет аналогов в области классического программирования и, 
следовательно, изучена крайне мало. Мы попытаемся исправить положение 
дел. В первую очередь выделим четыре категории взаимодействия с пользо- 
вателем: с участием только клиента, ориентированное на содержимое, ори- 
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Ротированное на сценарий и ориентированное на данные. Взаимодействие, 

поддержке которого участвует лишь клиент, реализуется наиболее просто, 
мы вкратце обсудим его в следующем разделе, а затем на конкретном при- 
зере подробно рассмотрим остальные три категории. 


5.4.1. Взаимодействие, затрагивающее только 
клиентскую программу 


Данный тип взаимодействия характеризуется тем, что действия пользовате- 
ля обрабатываются сценарием, который выполняется в среде браузера. Обра- 
щаться к ресурсам на стороне сервера (в частности, к уровню представления) 
нет необходимости, а это позволяет обеспечить быстрый отклик програм- 
мы и снижает нагрузку на сервер. Подобное взаимодействие подходит для 
несложных вычислений, например, для подсчета общей суммы товаров, зака- 
занных пользователем. Для того чтобы такой подход дал желаемые резуль- 
таты, программы, расположенные на стороне клиента и поддерживающие 
взаимодействие, не должны меняться в течение сеанса работы пользователя 
и объем их должен быть небольшим. Для приложения, предназначенного для 
поддержки интерактивного магазина, эти требования выполняются автома- 
тически. Число изделий, предлагаемых пользователю, относительно невелико 
(по крайней мере, не тысячи пунктов, как в случае библиотеки), и цены на 
товары не меняются каждую минуту (в отличие, например, от котировок ак- 
ций на бирже). Данный тип взаимодействия уже обсуждался в главе 4 при 
рассмотрении контроллера, расположенного на стороне клиента, поэтому мы 
больше не будем уделять ему внимание. 


Остальные три категории предполагают обращение к серверу и отлича- 
ются в основном передаваемыми данными. Главные различия между этими 
типами взаимодействия описаны в следующих разделах; там же рассмотрены 
преимущества и недостатки каждого из них. 


5.4.2. Пример отображения информации о планетах 


Перед тем как заняться изучением различных механизмов обмена данными, 
представим себе простой пример, на котором будем проверять то или иное ре- 
шение. Наше приложение будет представлять информацию о планетах Сол- 
нечной системы. В главном окне представлено изображение Солнечной си- 
стемы с пиктограммой для каждой планеты. На сервере хранятся сведения 
о планетах; щелчком на пиктограмме, соответствующей планете, надо отобра- 
зить эти сведения в окне (рис. 5.6). Сейчас мы не будем использовать объект 
ОБесе\жег, который рассматривался в главе 4, но еще вернемся к нему. 


В данном случае нас больше всего интересует процесс доставки данных, 
которые должны быть отображены. Мы обсудим форматы данных, передава- 
емых сервером, но не будем углубляться в детали их генерации, так как этот 
вопрос был рассмотрен в главе 3. В листинге 5.1 показана заготовка кли- 
ентского кода приложения. На ее основе мы будем исследовать различные 
Механизмы доставки данных. 
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Рис. 5.6. После щелчка на пиктограмме, 
соответствующей планете, информация 
о ней выводится в окне 





Листинг 5.1. Содержимое файла рорирѕ .В т 
<!РОСТУРЕ В РОВЬТС "-//МЗС//РТЬ ХНТМЬ 1.0 ЅЕгісё/ /ЕМ" 





"БЕЕр: / /ммми.м3 .ога/ТВ/хЬеи11/ОТЬ/хЬ 11 -зЕх1се.аЕа"> 
<рп1> <Беа@> <ёіё1е>Р1апеі Вгоиѕег</ііё1е> 
<1іпк ге1=ѕіу1еѕһееі суре="кехЕ/сз5" 
ҺгеЁ="шаіп.сѕѕ"/> 
<1іпк ге1=ѕіу1еѕһееі буре= "ёехё/сѕз" 
ҺгеЁ= "уіпаоуѕ.еѕѕ"/> 
<1іпк ге1=ѕіу1еѕһееі ёуре= "ёехі/сѕѕ" 
ҺгеЁ="р1апеёѕ.сѕѕ"/> 
// О Включение библиотек ЈауаЅсгірі <ѕсгірі 
Суре= "сех /јауаѕсгірі" 
згс= "х/х соге. ј з"х/зсгіріё> 
<зск1рЕ ёуре= "ёехі /јауаѕсгірі" 
згс= "х/х еуепё. ј з"х/зсгіріё> 
<зск1рЕ ёуре= "сехі /јауазѕзсгірё" 
згс= "х/х агаў. ј 5"></ѕсгірі> 
<зск1рЕ ёуре= "ёехі /јауазсгірё" 
згс= "міпаӢоиѕ. 5 "Х/ѕсгірё> 
<зск1рЕ іуре= "ех /јауаѕсгірі 
ѕзгс= "пе. 7] ="></ѕсгірі> 
<ѕсгірі ёуре= "бехе /јауаѕсгірі"> 
иіпаоу.оп1іоаа= Ёџпсіёіоп () { 
уаг рраг=аосомепе . деіЕ1епепіВу1а ("р1апеіѕ"); 
уар сһі1агеп=рраг.одеёЕ1 емепёѕВуТадћате ("аіу"); 
Ғог (уаг 1=0;і<сһі1агеп.1еподёһ;і++) { 
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// © Связывание с пиктограммами обработчиков 
событий 
сһі1агеп [1] .опс11ск=ером1пЕо; 


} 


0 
</ѕсгірі> 
</һеаа> <роду> 

// О Включение пиктограмм, соответствующих планетам <діу 
с1аѕѕ="р1Іапеёраг" 1іа= "р1апеёѕ"> 

<аіу с1аѕѕ= "р1іапеіриёіоп" 19="мехсиаку" > 

<ітюа згс="1та/Ба11-тмегсаку.а1Е" 
а1Е="мегсаку"/> </діу> <аіу с1аѕѕ= "р1апеёриёёоп" іа="уепиѕ"> 
<ітюао ѕгс= "ітод/ра11-уепиѕ.діЁ" аіё="уепиѕ"/> 
</аіу> <аӢіу с1аѕѕ= "р1апеёриёёоп" іа="еагіһ"> 

<ітюа ѕгс="ітд/ра11-еагЕһ.о1іЁ" аіё="еагіһ" /> 

</0іу> <аіу с1аѕѕ= "р1апеёриёёсоп" іа="такѕ"> 

<іпа згс="1та/ра11-пагз.91Е" аіё= "тагѕ"/> 

</0іу> <@1у с1аѕѕ= "р1іапеёриііоп" іа="јиріёег"> 

<1иа ѕгс="1ітод/ра11-јиріёег.діЁ" 

а16="јиріёег"/> </йіу> <@1у с1аѕѕ="р1апеёриёёоп" іа=" ѕаёигп"> 
<1иа ѕгс= "іто/ра11-ѕаёокп.одіЁ" а1і="ѕаёигп" /> 

</аіу> <а1у с1аѕѕ= "р1апеёриёёоп" 1а="ахапаз"> 

<1м9 зхс="1па/Ба11-ихкапа$.91Е" аїі= "огапиѕ" /> 
</аіу> <даіу с1аѕѕ= "р1апеёриёёоп" іа= "періёџопе"> 

<1иа згс="1иа/Ба11-переипе.а1Е" 
а1Е="переипе"/> </аіу> <@а1у с1азз="р1апеерае оп" 19="р1або"> 
<1иа вгс="1иа/ра11-р1о6о.91ЁЕ" а1Е="р1або"/> 
</аіу> </аіу> 

</роау> </һем1> 


В состав нашего файла мы включили несколько ЈауаЅсгірі-библиотек О. 
Средства, предоставляемые пеї.јѕ, обеспечивают поддержку низкоуровне- 
вых НТТР-запросов, используя для этой цели объект ХМІ.НќрКедиеѕі, ко- 
торый обсуждался в главе 2. В файле міпӣожѕ, јѕ определен объект окна, 
допускающего перетаскивание. Это окно мы используем для отображения 
информации. Детали реализации окна в данном случае не имеют значения; 
нас интересует только порядок вызова конструктора. 

уаг Му\Мпаом-=пем Міпаом(Ббоауріу,1е,х,у, №,һ); 
где роӢуріу — это элемент РОМ, который выводится в окне; їіїІе — строка, 
отображаемая в заголовке окна, а параметры х, у, \ и В определяют началь- 
ные размеры окна. Задавая элемент РОМ в качестве параметра, мы обеспе- 
чиваем достаточную гибкость при отображении данных к окне. Полностью 
код объекта \Мш4о\ можно скопировать с У№-узла, посвященного данной 
книге. Посредством НТМІ -кода, содержащегося в файле, мы определяем эле- 
мент Чу для каждой планеты ©, а в функции уіпіоу.опіоаа © связываем 
* пиктограммами планет обработчики опсі1іск. В качестве обработчиков ис- 
пользуются функции ѕћоміпѓ о (), которые в данном листинге не определены. 
В этой главе мы обсудим несколько вариантов их реализации. Рассмотрим 
Действия, которые мы можем предпринять тогда, когда нам требуется за- 
грузка данных. 
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Клиент 






<Һ1>АВС<ЉЋ1> 
<0> 

<1>1</1> 
<1>2</> 
<1>3</1> 
</ш> 











3. Отображение 


Рис. 5.7. Архитектура Ајах-приложения, ориентированная на 
содержимое. Клиент создает элемент ІЕгате и передает серверу 
запрос на получение информации. Содержимое генерируется 
моделью, представлением и контроллером уровня представления 
и возвращается элементу ІЕгате. На уровне клиента никакие 
требования к модели лредметной области не предъявляются 


5.4.3. Взаимодействие, ориентированное на содержимое 


Наши первые шаги по использованию подхода Ајах напоминают действия, 
которые предпринимаются при создании классического М№еб-приложения. 
В этом нет ничего удивительного; как было сказано в главе 1, в названии 
первых велосипедов присутствовало слово "лошадь". Взаимодействие, ориен-: 
тированное на содержимое, соответствует классическому подходу, но может 
иметь место и в Ајах-приложениях. 


Общие сведения 


При взаимодействии, ориентированном на содержимое, НТМГ-данные гене! 
рируются сервером и отображаются в составе элемента ГЕгате, включенно- 
го на главную У№е-страницу. Элементы ІЕгате обсуждались в главе 2. Их 
можно определить в НТМГ-коде страницы или сгенерировать с помощью 
программы. При программной генерации мы получаем динамический интер- 
фейс, а окно браузера напоминает оконный диспетчер. На рис. 5.7 условно 
показана архитектура, ориентированная на содержимое. 


В листинге 5.2 показана реализация обработчика событий рассматривае- 
мого приложения. При создании обработчика использовался подход, ориен- 
тированный на содержимое. 


Листинг 5.2. Содержимое файла СопїепїРорир. ] $ 
уар оЁЁѕес=8; 
Ғопсёіоп ѕһоу1пҒЁо (еуепі) { 
уаг р1апеё=һіѕ.іа; 
уар 1пЕоМ1п=пем СопіёепіРорир ( 
"1иЕо_"+р1апее+" .Вем1", 
рІапеё +" Рорир", 
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рІапеє, оЁЁѕеё, оЕЁЕзее, 320,320 





Еевес+-32; 

} 

Ғопсёіоп' 

СопіепіРорир (ик1,иіпЕ1,аіѕр1Іаубіг, х,у, и, В) { 
уаг роа=ӣосотепі . сгеаёеЕ1етепі ("Яаіу") ; 
Чосимепе . роду. аррепасћі1а (роа) ; 
Е51$.1Ехапе=аосимепе . сгеаёеЕ1етепі ("іЁгатме"); 
ЕҺ15.1 гате .с1аѕѕмМате= "үіпСопіёепіѕ"; 
Е51$.1Ехаше. зис=иг1; 
роа.аррепасһі1а (.һіѕ.іЁгатме) ; 


ЕҺіѕ.міп=пеу уі паоуѕ .И1оаои (роа,аїіѕр1ауѕіг, х,у, ит, һ) ; 

















Функция зВо\ШЕ о () выполняет роль обработчика события для ром- 
элемента, представляющего планету. В обработчике ссылка {11$ указывает 
на элемент РОМ. Чтобы определить, для какой из планет отображаются 
данные, используется идентификатор элемента. 

Мы определили объект СопіепіРорир, который генерирует универсаль- 
ный объект УМпадо\,, создает элемент І Егате, предназначенный для просмотра 
содержимого, и загружает в него ресурс, определяемый ОКІ.. В данной ситу- 
ации мы лишь формируем имя статического НТМГ-файла и оформляем его 
в виде ОВГ. В более сложном случае, если данные генерируются динамиче- 
ски, нам, возможно, придется добавить к ОВГ строку параметров. Простой 
файл, предназначенный для отображения в составе 1Егате (листинг 5.3), ге- 
нерируется сервером. 


Листинг 5.3. Содержимое файла іпѓғо_ еатіһ.һіті 

<ћем1> <һеаа»> 

<1іпк ге1=ѕіуІеѕһееі ёуре="бехіё/с=ѕ" ҺгеЁ="../ѕбу1е.сѕѕ"/> 
</ћеаа> 

<ройу с1аѕѕ="іпЁо"> 

<аіу с1аѕѕ=" Ғгатеа1пҒо" іа="1іпҒо"> 

<аіу с1аѕѕ= "ііё1е" 1а="1іпҒоёбіё1е">еагёһ</діу> 

<аіу с1аѕѕ="сопіёепі" 1іа="1іпҒосопёіепі"> 

А зпа11 Бае р1апеЕ пеаг һе оџіег гіт оЁ һе да1аху, 
еһіга р1апеё ооё Егош а піааіе-ѕіғлеа зоп. 

</аіу> </аіу> </роду> </һіті> 








В данном документе нет ничего примечательного: мы лишь используем 
обычный НТМГ-файл, как и для классического М№еБ-приложения. 

При использовании архитектуры, ориентированной на содержимое, кли- 
енту требуется лишь ограниченная информация о бизнес-логике приложения, 
Достаточная для размещения элемента ГЕгате и формирования ОКІ, опреде- 
ляющего содержимое для загрузки. Связь между клиентом и уровнем пред- 
ставления очень слабая; основная ответственность за предоставление содер- 
жимого возлагается на сервер. Преимущество данного типа взаимодействия 
состоит в том, что оно позволяет использовать готовые НТМТ-документы. 
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Он может оказаться полезен в двух случаях: при включении содержимого! 
предоставляемого внешними узлами, например, информации, получаемой от 
деловых партнеров, и при отображении данных, полученных от уже суще- 
ствующих приложений. В этих случаях использование формата НТМГ, может 
обеспечивать высокую эффективность, и, как правило, не возникает необхо- 
димости преобразовывать информацию в другой вид. В качестве примера 
можно привести документы, содержащие справочную информацию. Исполь- 
зовать в приложениях Ајах подход, ориентированный на содержимое, целе- 
сообразно в тех случаях, когда в классических приложениях применяются 
всплывающие окна. Тем не менее данная архитектура имеет ограниченное 
применение. Причины этого нетрудно понять, зная ее недостатки. 


Проблемы и ограничения 


Поскольку архитектура, ориентированная на содержимое, мало отличается 
от привычных Меб-страниц, ей присущи все ограничения данного подхода. 
Документ в элементе І Егате изолирован от остальной части страницы, в ко- 
торую он включается. В результате информация на экране выглядит фраг- 
ментированной. Правда, при размещении содержимого возможны различные 
варианты. Несмотря на то что І Егате представляет собой прямоугольное ок- 
но, содержащее дочерний документ, для него может быть задан прозрачный 
фон, в результате чего содержимое окна будет смешиваться с содержимым 
родительского документа. 


У некоторых разработчиков может возникнуть мысль использовать дан- 
ный механизм для доставки динамических частей страницы, но в этом случае 
могут возникнуть проблемы при работе с элементами ГЕгате. Каждый эле- 
мент І Егате поддерживает собственный контекст, и объем вспомогательно- 
го кода, необходимого для обеспечения взаимодействия содержимого ІЕгате 
с родительским документом, может оказаться значительным. При взаимо- 
действии со сценариями в других фреймах возникают еще более серьезные 
проблемы. Мы вернемся к этому вопросу при рассмотрении подхода, ориен- 
тированного на сценарий. 


Нельзя также забывать о проблемах, связанных с практичностью тради- 
ционных \!е-приложений. Во-первых, каждый запрос на получение содер- 
жимого предполагает повторное получение статических данных. Во-вторых, 
несмотря на то, что при обновлении данных в основном документе автомати- 
чески принимаются меры для подавления мерцания, в элементе ІЕгате этот 
эффект может присутствовать. Мерцания, правда, можно избежать, реали- 
зовав дополнительный код для отображения сообщения "поверх" фрейма. 

Итак, в качестве первого термина нашего словаря, описывающего запро- 
сы к серверу Ајах, мы записали понятие "ориентированный на содержимое". 
Применимость данного подхода ограничена, однако учесть такую возмож- 
ность все же необходимо. Существует ряд задач, которые нельзя удовлетво- 
рительно решить в рамках подхода, ориентированного на содержимое. В ка- 
честве примера таких задач можно привести обновление части компонента, 
например, отдельной пиктограммы или. строки таблицы. Единственный спо- 
соб решить такую задачу — передавать ЈауаЅсгірі-код. 
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Варианты применения подхода, ориентированного на содержимое 


До сих пор, рассматривая архитектуру, ориентированную на содержимое, мы 
предполагали, что для получения данных используется элемент ІЕгате. В ка- 
честве альтернативного решения можно рассмотреть генерацию фрагмента 
НТМГ-кода, как реакцию на асинхронный запрос, и присвоение ответа свой- 
ству шпегНТМГ, элемента РОМ текущего документа. Более подробно мы рас- 
смотрим данное решение в главе 12. 


5.4.4. Взаимодействие, ориентированное на сценарий 


Когда мы организуем передачу с сервера ЈауаЅсгірі-файла и выполнение это- 
го файла в среде браузера, мы можем утверждать, что решаемая нами задача 
нетривиальна. Если ЈауаЅсгірі-код, предназначенный для передачи, генери- 
руется программой, то выполняемые действия еще более сложны. Традицион- 
но клиентские и серверные программы обмениваются данными друг с другом. 
Передача по сети исполняемого кода обеспечивает дополнительную гибкость. 
Поддержка мобильного кода реализована лишь в инструментах, предназна- 
ченных для создания корпоративных приложений, например Јауа и .МЕТ. 
Для этой цели специально предусмотрены технологии КМГ, Ли, и.МЕТ Ве- 
топе Етатеуогк. Разработчики же простых №\еБ-приложений решают по- 
добные задачи постоянно! Логично предположить, что Ајах расширит наши 
возможности по работе с мобильным кодом. 


Общие сведения 


В классическом У№еБ-приложении НТМГ-код и ЈауаЅсгірі-сценарий обычно 
располагаются в одном файле, и сценарий специально ориентирован на ра- 
боту с конкретной У№еБ-страницей. Используя Ајах, мы можем загружать 
сценарии и Меб-страницы независимо друг от друга, а это дает возмож- 
ность модифицировать страницу различными способами, в зависимости от 
полученного сценария. Коды, составляющие клиентскую часть приложения, 
могут быть существенно расширены в процессе работы. Это не только предо- 
ставляет новые возможности, но и, как вы вскоре увидите, создает проблемы. 
На рис. 5.8 условно показана архитектура, ориентированная на сценарии. 


Первое преимущество данного подхода по сравнению с архитектурой, ори- 
ентированной на содержимое, состоит в том, что активные действия переда- 
ются элементам "второго плана", что предотвращает мерцание изображения. 

Особенности генерируемых сценариев определяются потребностями кли- 
ентского уровня. Как и для любой задачи, предполагающей генерацию кода, 
Успех ее решения зависит от того, удастся ли добиться, чтобы сгенерирован- 
ный код был простым и использовал существующие библиотеки. Библиотеки 
могут либо передаваться вместе с новым кодом, либо постоянно присутство- 
вать на стороне клиента. 

В любом случае данная архитектура предполагает тесную связь между 
Уровнями. Для генерации кода на стороне сервера необходимо иметь инфор- 
мацию об АРІ на стороне клиента. При этом возникают две проблемы. Во- 
первых, модифицируя клиентский или серверный код, можно случайно на- 
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Клиент 







уаг йетэ={ 
"1", 

"2". 

-3" 


} 
зпоу@ е, егт); 


Рис. 5.8. Архитектура Ајах-приложения, ориентированная на сценарии. 
Клиентская программа передает серверу запрос на получение фрагмента 
Јауа5сгірі-кода. Полученный код интерпретируется. На стороне клиента 
обеспечиваются точки входа для сгенерированных сценариев, что 
позволяет сценарию управлять клиентской программой 


рушить взаимодействие. Модульный подход к разработке и использование 
образа разработки Ғавайе могут несколько снизить подобную опасность. Во- 
вторых, поток ЈауаЅсгірі-кода ориентирован на конкретного клиента, и ор- 
ганизовать его повторное использование намного сложнее, чем, например, 


потока ХМГ-данных. Следует, однако, заметить, что пригодность к повтор- 
ному использованию не всегда бывает важна. 


Теперь вернемся к примеру отображения информации о планетах Сол- 


нечной системы. В листинге 5.4 показан простой АРТ для отображения окон 
с данными. 


Листинг 5.4. Функция зВо\РорирО и вспомогательный код 
уаг ойѕеї=8; 
Ғџпсііоп зһоуиРорир (паме, деѕсгірііоп) { 

уар м1п=пем бЅсгірі1 ЕгатеРорир 


(пате, деѕсгірііоп, оЁЁзѕеі,оЁЁѕеё, 320,320); 
оЁЁѕеі+=32; 


} 

Ғопсёіоп Ѕсгірі1 ЁгатеРорир (папе, деѕскірііоп, х,у, у,Һһ) { 
уар роа=ӣоситепі . сгеаёеЕ1етмепі ("Яіу"); 
досотепё . роду . аррепасһі1а (роа) ; 

ећіѕ. сопіепіріу=ӣосоптепі . сгеаёеЕ1етепі ("аіу"); 
Ећ1ѕ.сопёепіріу.с1аѕѕмМапе= "уіпСопіепіѕ"; 
Ећ15ѕ.сопбепіріу.іппекнтТмі=аеѕсгірёіоп; 
роа.аррепасһі1а (661 ѕ.сопёепіріу); 
Еһіѕ.міп=пеу мтоЯомз .И1паом (роа, паме, х,у, м, һ) ; 














Мы определили функцию ѕһоуРорир (), которая получает два параметра 
и создает объект окна. В листинге 5.5 приведен пример сценария, вызываю- 
щего эту функцию. 
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Листинг 5.5. Содержимое файла ѕсгірі еагіһ. јѕ 
уаг пате='еагіһ'; уаг Яеѕсгірііоп="А ѕта Бше 
рІапеї пеаг (һе ощег гіт оЁ {һе га[аху," 

+"(һіга рІапеї ошё ќот а тійаіе-ѕіхеа ѕип."; 
ѕһоуРорир (пате ,Яеѕсгірііоп); 


В данном случае мы подготавливаем параметры (имя и описание) и вы- 
зываем функцию. Для того чтобы такой вызов стал возможен, мы должны 
загрузить сценарий с сервера и заставить браузер выполнить его. Существу- 
ют два способа, позволяющие сделать это. Рассмотрим каждый из них. 


Загрузка сценариев в элементы ІЕгате 


Если мы загрузим ЈауаЅсгірі-код, используя НТМІ -дескриптор <сгірі>, 
сценарий будет автоматически обработан интерпретатором. С этой точки зре- 
ния элемент ІЕгате не отличается от обычного документа. Мы можем опре- 
делить метод зВо\ Е о () для создания ІЕгате и загрузить в него сценарий. 
Ғопсііоп ѕһожІпҒо(еуепі) { 
уаг рІапе=#һіѕ.іа; 


уагѕсгіріОгІ="ѕсгірі "+рІапеї+".һёті"; 
уаг 


ата гате=доситепЕ. веїЕІетепіВу1Іа('ааѓаѓгате') ; 
і? (!ааѓаЁгате){ 
аӢаѓағ#гате= аоситепі.сгеаѓе Е1етепі("іҒгате"); 
Чата гате.с1аз$ Мате = 'Яаѓаѓгате' ; 
Чата гате.14='ЧатаРгате'; 
ата!гате. згс =зстг1рЕ О г/; 
оситепЕ. Ббоду.аррепа СВПА (да{агате); 
)е15е{ ааѓғағгате.ѕгс=сгіріё0г1; 
} 
} 


Средства для обработки РОМ уже знакомы вам. Если мы используем 
для загрузки сценария невидимый элемент ІЕгате, то можем сосредоточить 
внимание на самом сценарии, поскольку все остальные действия выполня- 


ются автоматически. Включим наш пример сценария в НТМГ-документ, как 
показано в листинге 5.6. 


Листинг 5.6. Содержимое файла ѕсгірі еагіһ.һёті 
<> <һеаа> <ѕсгірі {уре=“ехи/]ауазсг1рт' 


ѕгс='сгірі еагіһ.јѕ'> </ѕсгірі> </еаа> <Боду> </оду> 
<Лті> 


Если мы попытаемся загрузить этот код, он не будет работать, так как 
ІЕгате формирует собственный ЈауаЅсгірі-контекст и не может непосред- 
ственно обратиться к АРІ, определенному в основном документе. Если в сце- 
нарии выполняется приведенное ниже выражение, браузер ищет функцию 
ѕһоуРорир () в контексте ІЕгате. 


ѕһомРорир (пате, аеѕсгірііоп); 
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Таблица 5.1. Результаты применения оператора іпзёапсеоѓ 


РИ ЕЕК У чье Е 8 № | 
Элемент, в котором был Элемент, в котором был вызван Результаты выполнения 











создан объект оператор іпзёапсеоѓ оператора 3 пзфапсеоЕ 
Документ верхнего уровня Документ верхнего уровня Е гие 

Документ верхнего уровня ІЕгате Ға1зе 

ІЕгате Документ верхнего уровня Ға1ѕе 

ІЕгапе ТЕгапе Егие 





В простых ситуациях, подобных рассматриваемой, при наличии двух кон- 
текстов мы можем указать перед вызовом идентификатор фор, формируя тем 


самым ссылку на документ верхнего уровня. 
їор.ѕһомРорир(пате,еѕсгіріоп); 


Если лее элемент І Егате содержится в составе другого элемента І Егате 
или если мы хотим запустить наше приложение в системе фреймов, ситуа- 
ция усложняется. 

В загружаемом нами сценарии используется функциональный подход. Ес- 
ли нам понадобится создать в І Егате экземпляр объекта, мы столкнемся с но- 
вой проблемой. Предположим, что в файле Р|1апе по. јѕ определен объект 
Р1апе пРо, к которому наш сценарий обращается следующим образом: 


уаг ршЮ=пем Р1апе по (пате, еѕсгірііоп); 


Для того чтобы такое обращение было возможно, мы должны импорти- 
ровать Р|!апе по. јѕ в контекст ІЕтате, указав дополнительный дескрип- 
тор <ѕсгірі>. 

<ѕсгірі {уре='ехі/јауаѕсгірі' 

ѕгс='РІапейпѓо.ј ѕ'></ѕсгірі> <ѕсгірі 

їуре='ехї/ј ауаѕсгірі'> 

уаг ріпѓо=пеу РІапейпѓо(пате,аеѕсгірііоп); 

</ѕсгірї> 

Объект Р!1апе по, созданный в Ііате, будет вести себя так же, как 
и объект, созданный во фрейме верхнего уровня, но они имеют разные про- 
тотипы. Если впоследствии мы удалим элемент ГЕгате, а документ верхнего 
уровня сохранит ссылку на объект, созданный в составе ІЕгате, то после- 
дующие обращения к методам объекта невозможны. Более того, оператор 
іпѕќапсеоѓ даст совершенно неожиданные результаты (табл. 5.1). 

Импортирование определения объекта в различные контексты — не такая 
простая задача, как это может показаться на первый взгляд. Решить пробле- 
му можно, определив в АРІ документа верхнего уровня фабричный метод. 
Например: 

Ғопсбоп  сгеайеР1апе по (пате, ЧезсирИоп){ 

гегаги пем Р1Іапепёо(пате,ӣеѕсгіріоп); 


} 
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При этом исчезает необходимость иметь ссылку на собственную версию 
объекта Р]1апе по. 

<ѕсгірі #уре= 'ехі/јауаѕсгірі'> 

уаг ріпѓо=сгеаѓеРІапеіїпѓо(пате,еѕсгірііоп); 

</ѕегірі> 

функция ѕһоуРорирО в листинге 5.4 представляет собой фабрику для 
объекта ЗсирИатеРорчр. 

Данный подход обеспечивает корректную работу сценария. На каждой 
странице нам необходимо передавать НТМІ -код, выполняющий роль шабло- 
на, но объем его значительно меньше, чем при использовании архитектуры, 
ориентированной на содержимое. Основной недостаток данного подхода свя- 
зан с созданием отдельного контекста ЈауаЅсгірі. Ниже описан способ, поз- 
воляющий устранить этот недостаток. 


Загрузка сценариев с использованием ХМІНїїрВедаиеѕї и ема(() 


Подобно многим языкам сценариев, ЈауаЅсгірі содержит функцию еуаі (), ко- 
торая позволяет передавать интерпретатору ЈауаЅсгірі произвольный текст. 
Некоторые считают, что использование функции еуа|() замедляет работу 
приложения. Это действительно так, если функция еуа|() систематически 
вызывается для малых сценариев. Однако, поскольку эта функция доступна 
нам, мы можем использовать ее для выполнения кода, загруженного с помо- 
шью объекта ХМІ.НирКедиџеѕі. Если функцию еуа1 () вызывать относительно 
редко для сценариев большого объема, она обеспечивает приемлемую произ- 
водительность. 

Переписав наш пример для работы с функцией еуаі (), получим следую- 
щий КОД: 

Ғопсіоп зпомшЮ(еуеп®{ 

уаг рІапеї=1һ1ѕ.іа; 

уаг ѕсгір0т1="ѕсгір "+ріапеї+".ј5"; 

пеу пет.Сощеп Гоааег(зс ирЕ (11, еуа1$сгірї); ) 
Ғопсііоп еуа1$сгірі(){ 

уаг ѕсгірі=1һіѕ.гед.геѕропѕеТехі; 

еуа1(ѕсгірї); } 

Теперь метод ѕһоуІпѓЁоО использует объект ХМІ.НќрКедиеѕї (помещен- 
ный в класс Сопѓепі оайег) для получения сценария с сервера; причем необ- 
ходимость включать его в состав НТМІ -страницы отпадает. Вторая функция, 
еуа1$сгірі(), представляет собой функцию обратного вызова; ссылка на нее 
передается СопѓепіГоайег. Когда функция еуа1$сгірі () получает управле- 
ние, может быть прочитано значение свойства гезропзеТех{, принадлежа- 
щего объекту ХМІ.НќрКедиеѕі. Весь сценарий выполняется не в отдельном 
контексте ІЕгате, а в контексте текущей страницы. 

Теперь мы описали новый термин — "ориентированный на сценарий". За- 
метим, что данный подход допускает две реализации; посредством ГЕгате или 
еуа1(). Сравним подход, ориентированный на сценарий, с подходом, ориен- 
тированным на содержимое. 
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Проблемы и ограничения 


При непосредственной загрузке сценария с сервера общий объем сообщения 
уменьшается; таким образом, сетевое соединение освобождается для других 
задач. Кроме того, в результате подобного подхода логика отделяется от 
представления, а изменение отображаемых данных не ограничивается пря- 
моугольной областью на экране, как это происходит при использовании под- 
хода, ориентированного на содержимое. 

Очевидным недостатком является взаимная зависимость клиентского 
и серверного кода. ЈауаЅсгірі-код, получаемый от сервера, крайне трудно 
использовать в другом контексте, поэтому приходится специально разраба- 
тывать программы для Ајах-клиентов. После начала эксплуатации изменить 
АРТ клиента очень сложно. 

В целом подход, ориентированный на сценарий, можно рассматривать как 
шаг в правильном направлении. Ајах-приложение начинает больше походить 
именно на приложение, а не на документ. Следующий вариант взаимодей- 
ствия позволяет ослабить взаимную зависимость клиента и сервера. 


5.4.5. Взаимодействие, ориентированное на данные 


При использовании подхода, ориентированного на сценарий, программа, вы- 
полняющаяся в среде браузера, ведет себя подобно традиционному "толстому" 
клиенту, т.е. запросы к серверу на получение данных формируются в фоно- 
вом режиме и намного меньше влияют на работу пользовательского интер- 
фейса. Однако сам сценарий представляет собой специализированный код 
клиента, выполняющегося в среде браузера. 


Общие сведения 


Иногда бывает необходимо организовать использование данных, полученных 
Ајах-клиентом, другими программами, например, интеллектуальными кли- 
ентами Јауа или .МЕТ, либо программным обеспечением мобильных телефо- 
нов или КПК. В этих случаях ЈауаЅсгірі-инструкции плохо применимы; более 
уместным был бы "нейтральный" формат данных. 

При взаимодействии, ориентированном на данные, сервер передает лишь 
данные, которые обрабатываются не интерпретатором ЈауаЅсгірі, а самой 
клиентской программой. Архитектура, ориентированная на данные, услов- 
но показана на рис. 5.9. 

Большинство примеров, приведенных в данной книге, создано в рамках 
подхода, ориентированного на данные. Наиболее очевидный формат дан- 
ных — ХМІ, но возможны также и другие форматы. 


Использование ХМІ-данных 


В настоящее время формат ХМІ. применяется очень часто. Среда браузера, 
в которой выполняется Ајах-приложение и, в частности, объект ХМЕНирКе- 
диеѕі, предоставляет средства поддержки ХМГ-данных. Если объект ХМІ- 
НИрКеадиез( получает ответ типа аррИсайоп/хп или ќехі/хті, он оформ- 
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<адаіа йе="е”> 
<ќет>1</йет> 
<йет>2</йет> 
<йет>3</їќет> 
</даїа> 






3. Разбор 
4. Обновление видимых 
элементов 









Рис. 5.9. В системе, ориентированной на данные, сервер в ответ на 
запрос возвращает поток низкоуровневых данных (представленных, 
например, в формате ХМИ. Эти данные обрабатываются на уровне 
клиента и используются для обновления клиентской модели и (или) 
пользовательского интерфейса 


ляет его в виде структуры РОМ (Юоситепі Објесі Мод4е]). В листинге 5.7 
приведен код приложения, отображающего данные о планетах, адаптирован- 
ный для работы с информацией в формате ХМГ. 


Листинг 5.7. Содержимое файла РаахХМГРортур. јѕ 
уаг ое =8; Ғипсііоп 
зво\Рорир(пате,4езсирНоп){ 
уаг міп=пеум РаѓаРорир(пате ,ӣеѕсгірііоп,оеї,оеї, 320,320); 


|р 








ойеї+=32; 

Ғопсёіоп 

РаёарРорир (папе, дӣеѕсгіріёіоп, х,у, м, 1) { 
уаг роа=досотмепі . сгеаёеЕ1етмепі ("Яіу") ; 


досотепё .роду .аррепасһі1а (роа) ; 
еһіѕ.сопіепіріу=доситепі . сгеаёбеЕ1епепі ("Яаіу"); 

Ећ1іѕ.сопбепіріу. с1аѕѕМаме= "утіпСопбепёѕ"; 

ЕҺіѕ.сопіепіріу.іппегнтТмМі=деѕсгірііоп; 

роа.аррепасһі1а (Еһіѕ.сопёепёріу); 

Е61$.ито=рем иіпаоизѕ .МіпдӢом (рой, пате, х,у, м,һ) ; 








} 
Ғопсііоп ѕһом1іпЁо (еуепі) { 
уаг р1апеё=+һіѕ.іа; 
уар зсгірі0г1=р1апеё+" .хті"; 
пеи пе .Сопёепі1Іоайег (ѕзсрірЕ0г1,рагѕехмі) ; 





} 
Еорсе1оп рагѕехмі () { 
уаг папме=""; 
уаг аезсгар=""; 
уаг хи1Рос=ЕЬ1$.хкеа.кезропзехмг; 


уаг е1 росВооё=хт1рос.ӯдеіЕ1І емепёѕВуТадмате ("р1Іапеі") [0]; 
1Е (е1росКооё) { 


асігз=е1 росВооё .аёбёгірибеѕ; 
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папе=аєігѕ . осеёмМатпеатіёет ("папе") .уа1ае; 

хаг ріуре=аіігз.деЕМатеатёбет ("буре") .уа1ае; 

1Е (реуре) { 
деѕзсгір+= " <ћ2>" +рёуре+" </Һ2>"; 

} 

деѕсгір+="<01>"; 

Гог (уаг 1=0; і<е1росВооі, сһі1а№одеѕ.1еподёһ;і++) { 
е1сһі1а=е1росКооё .сһі1а№одӣеѕ [1]; 
1Е (е1іСсһі1а.подемаме=="іпЁо") { 





аеѕскір+="<1і>"+е1сһі1а. #їігѕесһі1а.даёба+"</11і> (ВВ55) п" 


} 
} 
деѕскір+= "</01>"; 
}е1зе{ 
а1егі ("по аоситепё"); 


} 


Сор. зВомРорчур (пате, деѕсгір); 


Функция зВо\ш№() обращается к объекту ХМЕНИрКеаие$, содержаще- 
муся в составе СопѓепіГ оайег, и объявляет в качестве функции обратного 
вызова рагзехХМТ. (). В данном случае функция обратного вызова сложнее, 
чем еуа1Ѕсгірі(), которую мы рассматривали в разделе 5.6.3. Это связа- 
но с тем, что нам необходимо поддерживать навигацию по структуре РОМ, 
извлекать данные и вызывать метод ѕйоуРорир. В листинге 5.8 содержится 
пример ответа, сгенерированного сервером в формате ХМГ. 


Листинг 5.8. Содержимое файла еагіһ.хті 
<рІапеї пате="еагіһ" {уре="зтаП"> 
<шЮ ій="а" ашһог="дауе" дме="26/05/04"> 
Багіһ 15 а ѕта рІапеі, (һіга бот #һе зип 
</шЮ> 
<шЮ 14="6" аџіһог="Ӣауе" дайе="27 /02/05"> 
Ѕигѓасе соуегаве оЁ \ужег 1$ гоче у {\0-14$ 
</шЮ> 
<іпѓо іа="с" ащфог="4ауе" 4айе="03/05/05"> 


Ехһібііѕ а гетагка Ме Яіуегѕііу ог сітаќеѕ апа Іапаіѕсареѕ 
</шЮ> 
</рІапеї> 


Существенным преимуществом ХМІ., является тот факт, что информа- 
ция, представленная в этом формате, естественным образом структурирова- 
на. Так, в данном примере содержится ряд дескрипторов <іпѓо>, которые 
функция рагзеХМГ () преобразует в маркированный НТМГ-список. 
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Таким образом, благодаря использованию ХМГ нам удалось разделить 
уровни сервера и клиента. Код клиента и сервера можно изменять, независи- 
мо один от другого, при условии, конечно, что они будут поддерживать фор- 
мат документа. Однако подход, ориентированный на сценарий, имел очень 
важное преимущество: вся работа выполнялась ЈауаЅсгірі-интерпретатором. 
Рассмотрим решение, предполагающее использование ]$ОМ. Оно позволяет 
объединить преимущества обеих архитектур. 


Использование У$ОМ-данных 


Имя для объекта ХМЕНиИрКеаие было выбрано не совсем удачно. На са- 
мом деле он может принимать не только ХМІ, но и любую текстовую ин- 
формацию. Для передачи данных Ајах-клиенту очень удобен формат ЈЅОМ 
(Јауа$Ѕсгірі Објесі МотаНоп), так как он позволяет представить в компактном 
виде граф объектов ЈауаЅсгірі. В листинге 5.9 показано, как молено адапти- 
ровать пример приложения, предоставляющего информацию о планетах, для 
использования ЈЅОМ. 


Листинг 5.9. Содержимое файла Ваза ЗОМРорур. | $ 
Ғопсёеіоп зБом1пЕо (еуепі) 
{ 

уаг ріапеї=Єһіѕ.іа; 

уаг ѕсгірі0к1=р1апеё+" .Јјѕоп"; 

пеи пе . СопіепєІоааег (ѕсгірі0г1,ракѕејѕом) ; 





Ғопсііоп рагѕејЈЅ0\ () 
{ 
уаг паме=""; 
уаг дӢеѕсгір=""; 
уаг )зопТхЕ=пее.хкеа.гезропзеТехс; 
уаг јѕопорј=еуа1 (" ("+] зопТхЕ+")"); 
папе=ј ѕопорј .р1апеѓ .папе 
уаг ріуре=ј ѕопорј .р1Іапеї.іуре; 
1Е (рёурен 
деѕсгір+= " <ћ2>" +рёуре+"</һ2>"; 
) 
уар іпҒоѕ=јѕопорј .р1апеі.іпёо; 
Чезсх1р+="<и1>"; 
Ғоү (уар 1 іп іпЁоѕ) { 
Чезск1р+="<11>"+1пЕо$ [1] +"</1ір\п"; 
} 
Чезсх1р+="</о1>"; 
Сор. зБомРорир (паше ,Ааезск1р); 


5! . 





Здесь мы также загружаем данные с помощью Сопѓіепіоайег. Функцией 
обратного вызова в этом случае является рагѕе ЗОМ (). Текст ответа представ- 
ляет собой ЈауаЅсгірі-выражение, поэтому мы можем создать граф объектов 
путем вызова еуа1| (). 
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уаг )зопОЬ)=еуа1 (" ("+) зопТхЕ+")") ; 


Заметьте, что перед обработкой выражения нам надо поместить его 
в скобки. Теперь мы можем обращаться к свойствам объекта по имени, а это 
позволяет сократить размеры кода и сделать его более удобным для воспри- 
ятия, чем методы обработки структуры РОМ, которые мы использовали при 
работе с ХМГ. Здесь метод ѕһожРорир() не приводится, поскольку он выгля- 
дит точно так же, как и в листинге 5.7. 

Какой же вид имеют ЈЅОМ№-данные? В листинге 5.10 показана информа- 
ция о планете Земля, представленная как строка ЈЅОМ. 


Листинг 5.10. Содержимое файла еагіһ, јѕоп 


{ "рТапеё": 

{ 
"паме": "еагіһ", 
"Суре": "ѕта11", 
"ІпҒо": 


[ 


Багіһ іѕ а ѕта11 р1апеі, ёһіга Еком ёһе ѕоп", 
бигҒасе соуегаде оЁ мабех 15$ гоџ9һ1у іимо-Еһігаѕ", 


Ехһіріїѕ а кепагкар1е йіуегѕііу оЁ с11табез апа 1апаѕсареѕ" 





] 
} 


Ј = 


С помощью фигурных скобок определяются ассоциативные массивы, 
а квадратные скобки обозначают массивы с числовыми индексами. Допус- 
кается вложенность любых видов скобок. В приведенном примере мы опре- 
делили объект рІапеї, содержащий три свойства. Свойства пате и туре пред- 
ставляют собой обычные строки, а свойство іпѓо является массивом. 

Формат ЈЅОМ№ используется реже, чем ХМГ, но ЈЅОМ-данные могут 
быть обработаны любым интерпретатором ЈауаЅсгірі, включая МохШа Кһіпо 
на базе Јауа и Місгоѕой ЈЅсгірі МЕТ. Библиотеки ]ЗОМ-КРС содержат 
средства разбора ЈЅОМ для различных языков программирования (соот- 
ветствующие ссылки приведены в конце данной главы), а также инстру- 
мент Јауа$сгірі "Ѕігіпеіпег", предназначенный для преобразования ЈауаЅсгірі- 
объектов в строки ЈЅОМ. Таким образом, ЛЗОМ можно рассматривать как 
формат для двустороннего взаимодействия. Если интерпретатор ЈауаЅсгірі 
доступен и на стороне клиента, и на стороне сервера, целесообразно выбрать 
формат ЈЅОМ. В рамках проекта ЈЅОМ-КРС были также разработаны биб- 
лиотеки, предназначенные для разбора и генерации ЈЅОМ№-сообшений и ори- 
ентированные на языки, которые часто используются при разработке про- 
грамм, выполняемых на стороне сервера. 

Теперь в нашем словаре появился термин "ориентированный на данные". 
Кроме того, мы выяснили, что для обмена данными можно использовать не 
только ХМГ, но и другие форматы. 
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Использование ХЅ1Т 


Альтернативой написанию программ для обработки дерева РОМ и создания 
ЯТМГ-данных (этот подход был описан в разделе 5.7.3) является исполь- 
зование ХЗГТ-преобразования для автоматического конвертирования ХМГ- 
информации в формат ХНТМГ. Этот подход представляет собой нечто сред- 
нее между взаимодействием, ориентированным на данные, и взаимодействи- 
ем ориентированным на содержимое. С точки зрения сервера эта архитек- 
тура ориентирована на данные, а с точки зрения клиента — на содержимое. 
Такой подход позволяет быстрее и проще получить требуемый результат, но 
для него характерны те же ограничения, что и для взаимодействия, ориенти- 
рованного на содержимое, а именно, данные ответа затрагивают лишь прямо- 
угольную область в окне. ХЗГ/Т-преобразование будет подрой гее обсуждаться 
в главе 11. 


Проблемы и ограничения 


Главный недостаток подхода, ориентированного на данные, состоит в том, что 
основная нагрузка, связанная с разбором информации, ложится на клиент- 
скую программу. Это неизбежно ведет к усложнению кода на уровне клиента. 
Однако если данный подход получит широкое распространение, затраты на 
создание кода могут быть компенсированы за счет его повторного использо- 
вания или оформления некоторых функций в виде библиотеки. 

Три рассмотренных нами подхода описывают различные варианты си- 
стем: от классического У! е5-приложения до "толстого" клиента, характерно- 
го для настольных систем. К счастью, эти три архитектуры не являются 
взаимоисключающими и могут быть совместно использованы в рамках одно- 
го приложения. 

Очевидно, что между клиентом и сервером осуществляется двухстороннее 
взаимодействие. В завершение данной главы рассмотрим, как клиент пере- 
дает данные серверу. 


5.5. Передача данных серверу 


До сих пор мы уделяли внимание одной стороне взаимодействия — передаче 
сервером информации клиенту. Однако в большинстве приложений пользова- 
телю необходимо не только получать сведения о модели предметной области, 
но и управлять ею. В многопользовательской среде надо также обеспечить 
обновление отображаемых данных с учетом изменений, внесенных другими 
пользователями. 

Рассмотрим сначала обновление с учетом изменений, которые мы вносим 
сами. Существуют два механизма передачи данных на сервер: НТМІ-формы 
и объект ХМІ.НірКедџиеѕі. Рассмотрим кратко каждый из них. 
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5.5.1. Использование НТМІ-форм 


В классическом МеБ-приложении элементы НТМІ-форм реализуют стан- 
дартный механизм ввода данных пользователем. Элементы формы объяв- 
ляются с помощью средств разметки НТМГ. 


<Югт шефод="РОЗТ" асНоп="туРоги Нап ег О ВТ.рЮр"> 
<іпрш ќуре="1ехі" пате="иѕегпате"/> 
<іпрші їуре="раѕѕуога" пате="раѕѕуога"/> 
<іприі їуре="ѕибті" уаше="1ош"/> 
</Жогт> 
В результате обработки данного фрагмента кода отображаются два пу- 
стых поля редактирования. Если пользователь введет в полях значения ауе 
и Іеїтеіп и активизирует кнопку ѕибтії, будет сформирован НТТР-запрос 
РОЗТ и передан ресурсу туЕҒогтНапаіегОКІ.рһр. В теле запроса будет содер- 
жаться текст иѕегпате=аауеёраѕѕуога=1еітеіп. В большинстве систем МеБ- 
программирования разработчику непосредственно не доступны закодирован- 
ные данные формы. Вместо этого ему предоставляются пары имя-значения 
в виде ассоциативного массива или специальных переменных. 


В настоящее время авторы М№еб-страниц часто включают в них небольшие 
фрагменты Јауа$сгірі-кода, позволяющие проверить корректность введенных 
данных перед передачей их серверу. Для того чтобы организовать проверку, 
надо модифицировать нашу простую форму так, как показано ниже. 


<Югт іа="туЕогт" тшефод="РОЗТ" асііоп="" 
опѕиртіїі="уаһааѓеЕогт(); гебаги #а15е;"> 
<шрие фуре="{ех(" пате="иѕегпате"/> 
<шрий їуре="раѕѕуога" пате="раѕѕуогӣ"/> 
<іприё їуре="ѕирті" уаіџе="Іовіп"/> 
< /Жгт> 


В этом случае функция, выполняющая проверку, будет иметь следую- 
ЩИЙ ВИД: 


ҒЕопсёіоп уа11ЧабеРогм () { 

уаг Еогхи=аосомепте . деЕЕ1емепіВуІа ('штуЕогтм') ; 

уаг изег=Еоги.е1етептез [0] .хуа1пое; 

уат риЯ=Еоги.е1етепез [1] .уа1хое; 

1Е (оѕег && иѕег.1еподёһ>0 && риа && риа. 1епоёһ>0) { 
Ғогт.асііоп= 'туҒогпНапа1егуві.рһр'; 
Рог. зат (); 

} 


е1зе 
{ 

аіегі("рІеаѕе 1111 іп уоцг сгейепїііа15 Беѓоге Іовеіпе іп"); 
} 


} 


Первоначально форма определяется без атрибута асііоп. Обращение по 
реальному Ч КГ будет произведено только в случае положительного результа- 
та проверки. С помощью ЈауаЅсгірі-кода можно также модифицировать фор- 
му, организовав блокирование кнопки ѕиртії для предотвращения повторной 
передачи- данных, кодирование пароля перед формированием запроса и т.д. 
Эти и многие другие приемы многократно описаны в литературе, поэтому 
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Ч не будем рассматривать их здесь. В главах 9 и 10 приведены примеры 
расширения возможностей НТМГ-форм. 

Элемент формы можно также сформировать программно и реализовать 
передачу данных так, чтобы она не прерывала работу пользователя. Если 
мы сделаем форму невидимой, то сможем передавать данные незаметно для 
пользователя. Этот подход реализован в листинге 5.11. 


Листинг 5.11. Функция заб тИОа(а() 

Ғопсіоп ааарРагат(ѓогт,Ккеу,уаіие) 

уаг іприі=іоситепё.сгеаќе Еетепі("іприќ"); 
іприё.пате=Кеу; 
іприё.уаіџе=уа1пе; 
Ғогт.аррепасіһіа(іприї); 

} 


Ғопсіоп забтИОаа(иг1, даа) 
{ 
уаг юЮгт=адоситет.сгеаеЕетепт(("огт"); 
Ғогт.асііоп=оигі1; 
Ғогт.теоа="РОЅТ"; 
Рог (уаг і іп ааѓа)! 
аааРагат(Ғогт,і,ааѓа[1]); 


Ғогт.ѕїуІе.іѕрІау= "попе"; 
дӢоситепі.боӣу.аррепасііа(ѓогт); 
Ғогт.ѕибтії(); 





Функция зибтИОаца () создает форму и в цикле включает в нее данные, 
используя для этого функцию аааРагат (). Обращение к функции ѕиьтіїра- 
{а () имеет следующий вид: 

ѕиртіРаѓа( 

"туЕогтНапаіегОВІ.рћр", 
{оѕегпате:"Ӣауе",раѕѕуога: "Іеітеіп"} 
; 

Для использования данного подхода не требуется создавать большой объ- 
ем кода, но он не позволяет перехватывать ответ сервера. Мы можем поме- 
стить форму в невидимый элемент 1Егате, а затем организовать разбор ре- 
зультатов, но подобное решение оказывается достаточно громоздким. В ряде 
случаев удобнее воспользоваться для этой цели объектом ХМЕНИрКеаце<. 


5.5.2. Использование объекта ХМЁЕНИрРецие$1 


Объект ХМЕНИрВеаче$ уже рассматривался нами в этой главе, а также в гла- 
ве 2. С точки зрения клиентского кода разница между чтением и обновлени- 
ем незначительна. Нам надо лишь указать метод РОЅГ и передать парамет- 
Ры формы. 
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В листинге 5.12 показан код объекта Сопіепіоайег, который мы раз-я 
работали в разделе 3.1. Мы несколько изменили его для того, чтобы можнпи 
было включать в запрос параметры и указывать произвольный НТТР-метод 


Листинг 5.12. Объект СорбепеГоааег 





//О Для конструктора предусмотрены дополнительные параметры 
пееЕ.СопеерЕГоадег=ЕопсЕ1оп 
(1:1, обТоаа, обеггох, шеЕБоа,рагатз , сопбепЕТуре) 





51$ .оп1оаа=оп1оаа; 
Еһ1ѕ.опеггог= (опеггог) ? опеггог 
(515$ .ЧеРаз1ЕЕггог; 
515.1 оаахМГрос (иг1,меёһоа, рагатѕ, сопёепёТуре); } 
пе? .СопіепіІоайег.ргоёоіуре.1Іоаахмірос 
=Ёопсёіор (иг1,теіһоа, рагамз ‚ сопіепёТуре) { 
1Е (!теёһоа) { 
песһћоа= "СЕТ"; 











1Е (ісопёіепёТуре && шеброа=="РОЗТ") { 
сопіепёТуре= "арр1ісаёіоп/ х-ут- Ёогп-ог1епсойеа"; 





1Е (уіпаоу. ХМІНЕЕрВеаиеѕё) { 
(615$ .хгеа=рем ХМІНіёрКеаџеѕі (); 


е1ѕе 
1Е (иіпаоу.АсііуеХоОрјесі) { 
еһіѕ.гед=пем АсёіуехХорјесі ("МісгоѕоЁі .ХМІНТТР"); 


1Е (Еһіѕ.гед) { 
гу { 
ЕҺіѕ.геа. опгеайуѕёіаёсесһапде=пеі . Сопёепі1оадег.опКеайуЅіаёе; 





// НТТР-метод 
Е515.хеа.ореп( меёҺой, иг1, Егое); 


// Тип содержимого 
1Е (сопбепЕТуре) { 
ЕБ15.геа. зе ВеааезЕНеааег ("Сопіепё-Туре", сопеепЕТуре); 





// Параметры запроса 

Е5153.хеа.зепа( рагамз); 
}саєсһ (егг) { 

ЕҺіѕ.опеггог.са11(ёһізѕ) ; 
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Конструктору объекта мы передаем несколько новых параметров О. 
Из них обязательными являются ОВГ (в соответствии с атрибутом асііоп 
формы) и обработчик опоа4. Можно также задать НТТР-метод, парамет- 
ры и тип запроса. Заметьте, что при передаче пар ключ-значение посред- 
ством метода РОЅТ надо указать тип содержимого арріісаіоп/х-уүү-Ё огт- 
ипепсо4аеа. Если при вызове функции тип явно не задан, мы устанавлива- 
ем это значение автоматически. НТТР-метод используется при вызове мето- 
да ореп () объекта ХМЕНИрВеацез а параметры — при обращении к методу 
ѕепа( ). Таким образом, вызов конструктора имеет следующий вид: 


уаг Іоааег=пеї. СопѓіепіГоааег( 
'туЕогтНапаіегОКІ.рһр', ѕһо№Кеѕропѕе, пи, 
"РОЅТ', "оиѕегпате=ауе&раѕѕуога=Іеітеіп' 


); 

В результате выполнения этого выражения будет сформирован такой же 
запрос, как и при использовании метода ѕиртіїЮаѓа(), представленного в ли- 
стинге 5.11. Заметьте, что параметры передаются в виде строки, которая ко- 
дируется так же, как и при передаче данных формы, например: 

пате=аауе5јор=боок&могк=Ајах Іа+Асіоп 


Так действуют основные механизмы передачи данных серверу. Они могут 
активизироваться в результате различных событий: ввода пользователем тек- 
ста, перемещения мыши, перетаскивания объекта и т.д. В следующем разделе 
мы вернемся к объекту Објесіуіеуег, рассмотренному в главе 4, и выясним, 
как можно управлять обновлением модели предметной области. 


5.5.3. Управление обновлением модели 


В главе 3 мы рассмотрели универсальный объект Објесіуіеуег, предназна- 
ченный для представления сложных моделей, и обсудили простой пример, 
в котором данный объект используется для просмотра информации о пла- 
нетах. Каждый из объектов, представляющих планеты Солнечной системы, 
содержит несколько параметров, а некоторые текстовые свойства — диаметр 
и расстояние от Солнца — мы определили как редактируемые. Изменение 
любого свойства перехватывается центральной функцией обработки собы- 
тий, которую мы использовали для представления отладочной информации 
в строке состояния браузера. (Возможность записывать данные в строку со- 
стояния в последних версиях Мо7Ша ЕпеЮх ограничена. В приложении А мы 
рассмотрим простую консоль, поддерживаемую средствами Јауа$Ѕсгірі, кото- 
рая позволяет отображать сообщения о состоянии системы при отсутствии 
в браузере строки состояния.) Средства обработки событий почти идеально 
подходят для передачи серверу информации об обновлениях. 
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Предположим, что на сервере выполняется сценарий ирджеПотат- 
Моде. јѕр, который получает от клиента следующую информацию. 


• Уникальный идентификатор планеты, информация о которой подлежит 
обновлению. 


• Имя обновляемого свойства. 
• Значение, присвоенное свойству. 


Мы можем написать обработчик событий, который передавал бы серверу 
требуемую информацию. 


Ғопсбоп ирЯӣаѓеЅегуег(ргоруіемег) 

{ 

уаг ріІапеѓОЫј=ргоруіемег.уіемег.објесі; 
уаг р1апеа=р]апеОЪ}.14; 

уаг ргорМате=ргоруіемег.пате; 

уаг уа|[=ргоруе\жег.уаше; 

пе. Сотеп Гоадег 


"ирааќеОотаіпМойеі.јѕр', зотеКезропзеНап4ег, 
пи, 'РОЅТ', 'рЛапеа='+епсоде В Кр!апе а) 
+'&ргоремуМате='+епсоде ОВ (ргорМате) 
+'&уаше=' +епсойеОЕ (уа) 

); 
} 


Этот обработчик надо связать с ОбјесіМіежег. 
туОбјесіМіеуег.аааСһапве[іѕѓіепег(ирӣаѓеЅегуег) 


. 

Написать подобный код несложно, но результатом его выполнения будет 
передача по сети множества мелких фрагментов данных, что снижает эффек- 
тивность работы. Для того чтобы получит контроль над трафиком, нам надо 
перехватывать обновления, помещать их в локальную очередь, а затем, во 
время бездействия приложения, передавать их серверу большими пакетами. 
Простая очередь для хранения информации об обновлениях, реализованная 
средствами Јауа$Ѕсгірі, показана в листинге 5.13. 


ЛИСТИНГ 5.13. Объект СоттапаОоиеџе 


//О Создать обьехт очереди 
пеї. СоттапаОпеое=ѓипсііоп (іа, игі, Ёгед) 
{ 

1һ1ѕ.іа=іа; 

пе . стдоОоецџеѕ [іа] =6һіѕ; 

еҺ1іѕ.џг1=0игі; 

еһ1ѕ.аџеџей=пеи Аггау () ; 

ЕҺіѕ.ѕепё=пеит Аггау(); 

1Е (Егеа) 

{ 

(215 .кереаё (Ёгед); 
} 
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// 0 Передать запрос серверу 
пе . Соппапӣодиоепое .ргобобуре . аЯ9Соптата=ЕаюсЕ1оп (сотпапа) { 


1Е (Еһіѕ.іѕСоппапа (сопмапа) ) 


{ 
(615 .ачаеце. аррепа (соштап@, гие); 


} 
пе . Соппапӣдоепџе.ркоіоёуре. їі геВкеаоеѕі= Ёопсііор () { 


1Е (һіѕ.аџеџеа.1епоёһ==0) 
{ 
геіиоүп; 
} 
уаг дӢаёа="ЯӢаёа="; 
Ғог (уаг 1=0; і<ЕҺіѕ.аџеџеа.1еподіһ;і++) { 
уаг ста=ЕһҺіѕ.аџеџеағі ]; 
1Е (ЕһҺіѕ.іѕСоппапа (сма) ) { 
даса+=ста.соКкеаоџеѕіЅёгіпо () ; 
Еһ1іѕ.ѕепі [ ста. іа] =спа; 
} 
} 


(51$ .ааецед=пем Аггауо; 
Ссһіѕ.1оайег=пеу пеЕ.СопеерЕГоааек ( 
с51$.и:1, пе .Соппапддиепое.оп1оаа, пеёе.Соттапа0Оцеце .опегго: 


"РОЅТ" , ааба 





); 
} 


// © Проверить тип объекта 
пе? . СопиапОчеце .ргоёоіуре.іѕСоппапа= Ёопсёіоп (орј) 


{ 


геёигп 


( 
ор) .імр1емепёѕРгорс'ійа") 
&& ор] .ітр1іемепёзѕЕипс ( "ёоКеаџеѕёбікіпа") 


&& ору .ітр1емепіѕЕопс ("ракѕеВеѕропѕе") 
у 
} 
// О Выполнить разбор ответа сервера 
пе .Соптападиоепое .оп1оаа=Ёопсіёіоп (1оайег) 


{ 
уаг хтм1рос=пеі . геа. геѕропѕехмі; 
уаг е1 росКооё=хпм1рос.деёЕ1 емепёѕВуТасдматме (" соптмапаѕ") [0]; 
1Е (е1росВооё) 


{ 








Гог(1=0; Ке! ОосКоої. сћі1а Мойеѕ.Іепеїһ; і++) 
{ 


е1сһі1а=е1росВооё.сһі1аМодеѕ [1]; 


1Е (еісһі1а.подемате= =" сотпапа") 
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уар аёікѕ=е1сһі1а.аёігіриёеѕ; 
уар 1а=аеет$ .чееМамеятеем ("іа") .уа1ае; 
уаг соппапа=пеѓ . сомтап@Очеце . зепё [1а]; 
1Е (соттапа) 
{ 

соптапЯ .рагзеВезропзе (еїсһі1а) ; 


} 


} 


реЕ.СоптапЯОцече . опегког=ЕопсЕ1оп (1оайег) { 
а1егіЕ ("ргоб1ем зепалпа ёһе даба Со Еһе зекуег"); } 


// © Опрос сервера 
пее.СоштапЯОчеце .ргоіоіуре.гереас= Ёџпсёіоп (Ёгед) { 


6515$ .чогереаё (); 

1Е (Егеа>0){ 
ср15$.Екеа=Ехеа; 
уаг ста= "пе . спадоецеѕ ["+661$.14+"].Е1хеВесааезе ()"; 
ЕҺіѕ. гереасег=ѕеё1пбегуа1 (ста, Ёгеа* 1000) ; 





} 


// 0 Отключить опрос сервера 
рее. СоптапЯОцеце . ркоіоіуре.опгереаі= Ёопсііоп () 
{ 
1Е (Еһіѕ.гереаіег) 
{ 
с1еаг1пёегуа1 (Еёһ1іѕ.гереаіег) ; 
} 


ЕҺіѕ.гереаёсег=пи11; 


При инициализации О объекта СоштапаОчеие (он назван так потому, что 
в очереди содержатся объекты Соплтапа) указывается уникальный иденти- 
фикатор, ОВГ сценария на стороне сервера и в качестве необязательного 
параметра — флаг, указывающий на необходимость повторного опроса. Алы 
тернативный вариант — активизация опроса вручную. Каждый из этих ре- 
жимов может быть полезен, поэтому оба они предусмотрены в коде объекта. 
Когда очередь формирует запрос серверу, все содержащиеся в ней команды 
преобразуются в строки и передаются серверу ©. 

В составе объекта содержатся два массива. Массив ацеие предполагает 
указание числовых индексов; в него помещаются новые обновления. Массив 
ѕепі — ассоциативный. Он содержит те обновления, которые были отправ- 
лены серверу, но ответы на которые еще не были получены. В обоих масси- 
вах содержатся объекты Соттапа, интерфейс которых определяется функци- 
ей іѕСоттапа() ©. Эти объекты обладают следующими свойствами. 
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. Объект может иметь уникальный идентификатор. 
. Объект допускает сериализацию для включения в состав запроса 
РОЗТ ©. 


• Объект может выполнять разбор ответа сервера О и определять, успеш- 
но ли был обработан запрос и должны ли предприниматься дальней- 


шие действия. 


Для проверки выполнения условий используется функция ітріетепіѕ- 
Еипс(). Поскольку данный метод принадлежит базовому классу Објесї, мо- 
жет показаться, что он является стандартным инструментом ЈауаЅсгірї, но 
на самом деле мы объявляем функцию ппр!етеп{5 Рипс О в составе вспомо- 
гательной библиотеки. 

ОБ есі.ргоѓоїуре.ітріетепіѕЕопс=ѓипсііоп(ѓопсМате){ 

геіигп іһіѕ[ЁопсМ№Мате] && #һіѕ[ғопсМате] іпѕќапсеоғѓ 
Еоџпсіоп; } 


Прототипы Јауа$сгірі подробно описаны в приложении Б. Теперь вернем- 
ся к объекту, реализующему очередь. Метод опіоаа очереди О ожидает отве- 
та сервера, содержащего ХМГ-документ. В составе документа должны при- 
сутствовать дескрипторы <соттапа>, помещенные в дескриптор <соттапдѕ>. 

Методы гереаї() © и ипгереаї () © используются для управления объ- 


ектом таймера при периодическом опросе сервера. 
Объект Соттапа, предназначенный для обновления свойств объекта, опи- 


сывающего планету, показан в листинге 5.14. 


Листинг 5.14. Объект ОрааѓеРгорегіуСоттапа 
рІапеїѕ.соттапаз. ОЈрааѓіеРгорегіуСоттапа=ѓипсііоп(оупег,ће1а ‚уаше) 
{ 

Е51$.1а=6р1$.омпехг.1а+" _"+Езета; 

ЕҺ1іѕ.орј=оуктпеү; 

Ср15$. Е1е1а-Е1ета; 

615$ .уа1ае=уа1ае; 


} 


р1апее$ .соштап@$ . ОраӢаёсеРгорегіуСоптапа. соВечаез Е $ х1па= 
Ғопсёіоп () 
{ 
геіигп 
{ 
Суре: "ираӢаёеРгорегёу", 
іа:Єһіѕ.іа, 
р1Іапеє1а:+һіѕ.оипег.іа, 
Ғіе1а:һіѕ.#іе1а, 
уа1џе:Еһіѕ.уа10е 
}. ѕ1ітр1еХт11 у ("соппапа"); 
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рІапеёѕ .соптапа$ . ОрааёсеРгорегіуСоптапа.рагѕеКеѕропѕе= 
Ғопсёіор (аӢосЕ1) 


{ 








уаг асігѕ=аосЕ1.аёёгіриіёеѕ; 
уаг ѕсасиѕ=аіёго . сеёМапеатІіет ("ѕёсаёиѕ") .уа1ае; 
1Е (ѕбаёбиѕ!="оКк") 
{ 
уаг геаѕоп =аїігѕ.веМатеаіет("теѕѕаве").уаІие; 
аіегі("Ғаіїеа їо праае " 
+ЕҺіѕ.Ғіеіа+" ќо "+ғһіѕ.уаіце 
+ "\п\п"+геаѕоп); 





Данный объект предоставляет уникальный идентификатор команды и ин- 
капсулирует параметры, необходимые серверу. Функция іо Кедиоеѕіѕігіпе() 
оформляет сама себя в виде фрагмента ХМГ-кода, используя специальную 
функцию, которую мы присоединили к прототипу Објесї. 

Објесі.ргоѓоѓуре.ѕітріеХтііѓу=ѓипсііоп(ќавпате)ї 

уаг хті="<"-+арпате; 
Гог (і іп 11һ15){ 
Ш (1615[1] шЯарпсеоЁ Еопсііоп) 


хті+=" "=" "нер" \""; 
} 


} 
хті+="/>";- 
геиги хт; 
) 
В результате создается простой ХМГ-дескриптор (для удобства восприя- 
тия он отформатирован вручную). 
<соттапа {уре='арда(е Ргорегіу' 
14='001 аіатеѓег' 
рІапейа= 'тегсигу' 
бе1а='іатеїег' 
уаіие='3' 


/> 

Заметьте, что уникальный идентификатор формируется из идентифика- 
тора планеты и имени свойства. Мы не можем передать серверу несколько 
вариантов одного и того же значения. Если перед передачей содержимого 
очереди мы несколько раз отредактируем свойство, каждое последующее зна- 
чение будет заменять предыдущее. 

В составе запроса РОЅТ, передаваемого серверу, может содержаться один 
или несколько описанных выше дескрипторов, в зависимости от частоты 
опроса и активности пользователя. Сервер обрабатывает каждую команду 
и сохраняет результаты, формируя ответ. Обработчик опіоаа, принадлежа- 
щий СоттапаОоџеџе, распознает дескрипторы в ответе, сравнивает их с объ- 
ектами Соттапа в массиве ѕепі и вызывает метод рагзеКезропзе () объекта 
Соттапа. Ответ может выглядеть следующим образом: 
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<соттапа$> 
<соштапа 14='001 діатеѓег ѕќаіиѕ='ок'/> 
<соттара 14='003 аБеао' 
ѕіаїиѕ= 'ҒаіІеа' теѕѕаве='үаіие оші оѓ гапве'/> 
<соттара і14='004 ҺаігСо1Іог' 
ѕіаїиѕ= 'ҒаіІеа' теѕѕаве= іпуаіа ргорегіу пате /> 

< / согптапа > 

Как видно из сообщения, информация о диаметре Меркурия была об- 
новлена, но другие два обновления отклонены. Причины описаны посред- 
ством атрибута теѕѕаве. Пользователь оповещается о возникающих пробле- 
мах (обычно для этого используется функция а1егі ()) и может предпринять 
ответные действия. 

Компонент, обрабатывающий запросы на стороне сервера, должен выде- 
лять из данных запроса отдельные команды и передавать каждую команду 
соответствующему объекту обработчика. По мере обработки команд резуль- 
таты записываются в НТТР-ответ. Код простого Јауа-сервлета, предназна- 
ченного для решения описанной задачи, представлен в листинге 5.15. 


Листинг 5.15. Содержимое файла СоттапаЅегу1еї .Јауа 
роЫьіс с1азз СоштапазЗег/Ме ежепа$ НїїрЅегу1еї 
{ 
риуае Мар соттапаТуреѕ=пш!; 
раБИс уоіа іпії() #һћгомѕ ЅегуІе#Ехсеріоп 
{ 
Зегу!е(СопЯе сопбо=вреїЅбегуІеїСопће(); 
// О Конфигурация обработчиков 
соттапаТуреѕ=пем НаѕћМар(); 
ђооІеап тоге=їгие; 
Ғог(іпі соипѓег=1; тоге; соипіег++){ 
Ѕігіпв {уреМаше=соп И». ге ИпИРагаше(ег("(уре" +соипіег); 
Ѕ1гіпе уре! трі=сопѓіе.веі1піРагатеќѓег("ітрі" +соипќѓег); 


Ш ({ќуреМате==пші || #уреітрі==10ш1){ 
тоге=ѓа1ѕе; 


} 


е1ѕе 


їгу{ 
С1Іаѕѕ с15=С1аѕѕ.ҒогМате(ќуре1 трі); 


соттапаТуреѕ.ри(ёуреМате,е1); 
саіс (С1аѕѕ Мо ЕоипаЕхсерійоп с1апЁех) 


{61$.105( 
"со ап ' 6 геѕо1уе һапа1іег с1аѕѕ пате" +ёуре1тр1); 
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ргоёсесіеа уоіа аороѕі 
( 
НЕсрбегу1ееВеаоезе гед, 
НеєрЅегу1еіВеѕропѕе геѕр 
) 








Сһгоиѕ ІОЕхсерііоп { 


// 0 Обработать запрос 
гезр.зе(СопеепЕТуре ("бех /хт1"); 
Веааег геайег=гед.деіКеааег () ; 
Иібег игіёек=кеѕр.одеійкііег () ; 














Сгу{ ЗЅАХВиі1аег риі1йег=пеи ЅАХВиі1аеү (Ға1ѕе); 


// © Обработать ХМІ-данные 
Росотепі Яаос=риі1аег.роі1а (хеааег); 
Е1етепЕ гооё=аос.деіВооёЕ1етмепі () ; 








ТЕ ("сотпапаѕ" .еаџа1ѕ (гооі .деёмате ())) { 
Ғоү (Ісегасог ііёег=гооі .деёсһі1агеп (" соппапа") .ібсегаіог (); 


ібег.ҺаѕМехі ();) 





Е1емепі е1= (Е1емепё) (іёег.пехі ()); 

бігіпс ёуре=е1.деёАіігірибеуа1пце ("буре"); 
ХМГСопмапаРхосеззог соппапа=сдеіСоптапа (буре, игіёег) ; 
1Е (соттапа! =п011) 


{ 








// О Делегировать обработку 
Е1етепі геѕо1ё=сотпапа.ргосеѕзхмі (е1); 
муібег.имгібе (кеѕиіё.боѕёгіпо()); 








} 
е1зе 
{ 
ѕзепаЕггог (мгіёег, 
"іпсоггесі аосимепЕ Ёогтаё - 
+"ехресіеа ёор-Іеуе1 соппапа іад") ; 





} 


} 
саеср (ЈромЕхсерёіоп јаотех) { 
зепаЕггох (мгіёег, "опаб1е іо рагзе гедаезЕ Яаоситепё"); 








} 


ргіуасе ХМІСоппапаргосеѕѕог деіСоппапа 
(Ѕігіпо Суре,Мг1еех игіёег) 
СЮгомз ІОЕхсерёіоп { 








// © Соответствие обработчика команде 
ХМІСоппапаргосеѕѕог ста=пи11; 

С1аѕѕ с1ѕ= (С1аѕѕ) (соппапатТуреѕ.деі (Еуре) ); 
ТЕ (с15!=п0и11) { 
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Ску{ спа= (хХмІСотпапаргосеѕѕог) (е1ѕ.пем1іпѕіёапсе ()) ; 
}саёсһ (С1аѕѕСаѕЕЕхсерёіоп сазѕіех) { 
сепаЕггох (игііег, 
"с1азз "+с1ѕ.одеіМате () 
+" 15 поё а сотпапа"); 








} 
саєсһ (ІпѕёбапбіаііопЕхсерёіоп іпѕіех) 








зепаЕггог (игііег, 
"пос аб1е ёо сгеаёе с1аѕѕ "+с1ѕ.деіМате ()); 
} сас (111еда1АссеѕѕЕхсерііоп і11ех) 








зепаЕггог (игііег, 
"по аі1іоиеа бо сгеабе с1аѕѕ "+с15ѕ.деЕмате ()); 


}е1зе{ 
зепаЕггог (мгіёег, "по соппапа буре гедіѕёекейа Ғог "+6уре); 





} 
геіогп спа; 


} 


ргіуаѓіе уоіа зепаЕггог 
(Мгіѓег угіїег, 51гіпе теззазе) іһгомѕ ІОЕхсерііопі 
мгіїег. мгіѓе(" <еггог тзё='" + теѕѕаве+" '/ >"); 
мгісег. Ё1оѕһ(); 

} 





Данный сервлет поддерживает карту объектов ХМІ.Соттапаргосеѕѕог, для 
конфигурирования которой используется интерфейс ЅегуІеіСопів О. При 
использовании более мощных базовых средств можно воспользоваться для 
этой цели конфигурационным ХМІ-файлом. При обработке запроса РОЅТ © 
для разбора ХМГ-данных используется ЛООМ ©, а затем осуществляется 
перебор дескрипторов <согатапа>, для которых атрибуты соответствуют объ- 
екту обработчика ХМ СоштапаРгосеззог О. В карте содержатся определения 
классов, на основе которых в методе ғеїСоттапа () мы создаем конкретные 
экземпляры, используя механизм отражения ©. 

В интерфейсе ХМЕСоштапаРгосеззог объявлен единственный метод. 

раябИс ицегРасе ХМІ.Соттапаргосеѕѕог { 

Еетепі ргосеззХМТ(НетепЕ е1); } 

В данном интерфейсе предполагается, что для представления ХМІ- 
Данных будут применяться библиотеки /ООМ. Объектами Еетепі являются 
как параметры, так и возвращаемое значение. Простой класс, реализующий 
Данный интерфейс и предназначенный для обновления данных о планетах, 
показан в листинге 5.16. 
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Листинг 5.16. Содержимое файла Р1апеОраӢасеСоітапаргосеѕѕог. Јауа 
рир1ііс с1аѕѕ Р1апеіуОрдӢаёеСоппапаргосеѕѕог 
іпріетепёѕ ХМІСоппапаргосеѕѕог 
{ 
рирііс Е1емепі ргосеѕѕХМі ( 


{ 











Е1емепі е1) 


// О Создать ХМІ-узел результатов 

Е1етепЕ гезо1е=пем Е1етепі ("соптап@") ; 

бігіпо 1а-е1.одеёАЕЕГіриёеуа1пе ("1а"); 
геѕи1ё.ѕеёАбігіриобе("1а", 1а); 

ЅЕгіпо ѕбаёиѕ=пи11; 

бігіпа геаѕоп=пи11; 

бега р1апеє1а=е1 .деёАбёгіробеуа1пце ("рІапеі1а"); 
бігіпа Ёіе1а=е1 .деёАЕгірибеуа1пе ("Е1е1а"); 
бігіпа уа1џе=е1 .деёАіёігірибеуа1пце ("уа1пе"); 














// @ Обращение к модели предметной области 
Р1апе ріапеі=#1іпар1апеё (р1іапеё1а); 


1Е (рІапеё==пи11) { 
зраёоѕ-"Ғаі1еа"; 
геаѕоп= "по р1апеЕ Ёоџпа Ёог іа "+р1апеі1а; 

}е1ѕе{ 
Роџр1іе помУа1ае=пем роцр1е (уа1ае); 
Орјесі[] агаз=пем Орјесё [] { поп\Уа1оае 

ў; 
бігіп9 шесһоа = "ѕеё"+#іе1а. ѕирѕігіпо (0,1) .ёо0ррегСаѕе () 
+#іе1а. ѕзорѕёгіпо (1); 

бсаёемепё ѕбаёсемепі=пем ббаёсепшепі (р1Іапеё , тесћоа, агрдѕ); 
Суу { 





// © Обновить модель предметной области 
ѕзсасетмепё .ехесиобе (); 
ѕсасиѕ= "оК"; 
} саёсһ (Ехсерііоп е) { 
збаёиѕ=" Еа11еа"; 
геаѕоп= "оипар1е ёо ѕеё уа1џе "+уа1ае+" ог Е1е1а "+ғіе1а; 








тезо1е. ѕзеёһАбігіриёе ("ѕёаёиѕ" , ѕіаёиѕ) ; 
1Е (хеаѕоп!=пи11) { 

геѕи1ё . ѕзеёкАёёгіриіе ("геаѕоп" , геаѕоп) ; 
} 
тебагп геѕи1і; 


} 
рг1уабсе Р1апеі ЁЕ1паР1апее (Ѕёгіпо р1апеЕТа) 


// О Использовать ОКМ для модели предметной области 
тебахп по11; 
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ТОМ используется не только для разбора ХМГ-данных, содержащих- 
ся в запросе, но и для генерации ответа. Корневой узел О и дочерние узлы 
создаются в методе ргосеззХМГ.О. Для доступа к модели предметной обла- 
сти на стороне сервера используется метод Г іпарІапеї () ©; ему передается 
идентификатор объекта. Реализация метода Ё шаР!апе( () здесь не рассмат- 
ривается; заметим лишь, что в нем реализуется обмен с базой данных тра- 
диционными способами О. Для обновления модели предметной области © 
применяется механизм отражения. 

Так в общих чертах выглядит архитектура, основанная на использова- 
нии очереди и используемая для объединения частных действий по обновле- 
нию модели предметной области в одну НТТР-транзакцию. Она позволяет 
не только синхронизировать модели на стороне клиента и на стороне серве- 
ра, но и эффективно управлять трафиком. Как было сказано в разделе 5.3, 
такое решение может быть использовано совместно с ЈЅЕ и другими подоб- 
ными средствами, когда структура пользовательского интерфейса и модель 
взаимодействия существенно зависят от сервера. В данном случае мы лишь 
реализовали эффективный способ обновления модели предметной области на 
разных уровнях. 

На этом мы заканчиваем разговор о средствах обеспечения взаимодей- 
ствия клиента и сервера и обзор основных элементов, определяющих струк- 
туру Ај ах-приложений. По сути, мы заложили основы языка запросов к сер- 
веру в рамках Ајах-приложения и получили представление о возможностях, 
доступных для его реализации. 


5.6. Резюме 


Мы начали данную главу с рассмотрения основных функций сервера в соста- 
ве Ајах-приложения, а именно с доставки клиентского кода браузеру и предо- 
ставления клиенту данных в процессе работы. Рассматривая эти вопросы, мы 
учли наиболее популярные языки и инструменты, используемые для создания 
серверных программ. Они ориентированы на классические Мер-приложения, 
и мы выяснили, насколько они подходят для Адах. Инструменты, предназна- 
ченные для создания серверных программ, очень быстро изменяются, поэто- 
му, вместо того, чтобы обсуждать конкретные продукты, мы разделили их на 
категории в зависимости от используемой архитектуры. В результате было 
выделено три основных направления: архитектура Моае12, средства на ос- 
нове компонентов и архитектура, ориентированная на использование служб. 
На сегодняшний день есть основания считать, что лучше всего для Ајах под- 
ходит ЅОА, однако попытки адаптировать другие архитектуры также могут 
Увенчаться успехом. 
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Далее мы выделили три основных подхода к решению задачи доставки 
данных от сервера клиенту: ориентированный на содержимое, ориентирован- 
ный на сценарий и ориентированный на данные. Если классическое У№- 
приложение больше всего соответствует архитектуре, ориентированной на 
содержимое, то приложение Ајах больше укладывается в схему, ориентиро- 
ванную на данные. Взаимодействие, ориентированное на сценарии, занимает 
промежуточную позицию. Обсуждая архитектуру, ориентированную на дан- 
ные, мы выяснили, что ХМГ — не единственно возможный формат пред- 
ставления данных. В некоторых случаях при доставке информации клиенту 
может успешно применяться формат ЈЅОМ. 

И наконец, мы описали способы передачи данных на сервер, используя 
для этой цели НТМГ-формы и объект ХМЕНИрКеаие$. Мы также обсуждали 
возможности управления передачей данных путем создания на стороне кли- 
ента очереди объектов Соттапа. Данный подход обеспечивает существенное 
повышение производительности, снижая как нагрузку на сервер, так и се- 
тевой трафик. Переходя к взаимодействию, ориентированному на данные, 
мы отказываемся от действий, основанных на удаленном вызове процедур, 
и переходим к работе с документом. 


Этой главой мы завершаем разговор о базовых технологиях Адах. Мы 
обсудили все основные вопросы и даже затронули более сложные темы. В по- 
следующих трех главах мы вернемся к проблеме применимости программ 
и выясним, чем же отличаются поделки, пусть даже талантливые, от насто- 
ящих продуктов, в которых нуждаются пользователи. 


5.7. Ресурсы 


В данной главе были упомянуты некоторые инструменты разработки. Ниже 
приведены их ОВГ. 

Зи ($ (ВИр://$1ги($.арасПе.ог®). 

Тареѕігу (БИр://]аКаща.арасВе.ог=/(арезгу/). 

ЈЅЕ (ігр: //јауа.ѕип.сот/ј2ее/јауаѕегуегҒасеѕ/Ғаа.һіт1). 

РНР-МУС (һіїр://ууу.рһртус.пей). 

По данным исследований (һр: //місКеї.ѕоигсеѓогве. пеї/Іпігойис 
поп.һіті), в настоящее время только для Јауа существует более 60 набо- 
ров базовых средств. 

ЈЅЕ — это категория инструментов, в которую входят различные 
продукты. Кито Манн (Кіќо Мапп), автор книги Јауа5еғуег Еасех т 
Аспоп (Маппше, 2004), поддерживает \Уе6-портал, посвященный ЈЅЕ 
(ВИр://м\\.]$Есеп(га1.сот/). Материалы, подготовленные Грегом Мюр- 
реем (Стеб Миггау) и его коллегами в ходе обсуждения тем Ајах и ЈЅЕ, до- 
ступны по адресу 1һ1рѕ://брсаѓа1Іов.еу.јауа.пеі/попау/ајах/јѕҒ-ајах/ 
Ёгатеѕ.һіті. АјахЕасеѕ представляет собой реализацию ЈЅЕ для Ајах 
(ВИр://\м\\.а]ахГасез.сот); этот продукт распространяется на коммер- 
ческой основе. Готовится модификация Арасһе Ореп Ѕошсе МУуҒасеѕ 
(Һер://туѓасеѕ.арасһе.оге /ѕапабох/іприѓЅиеввеѕіАјах. 111) в соответ- 
ствии с требованиями Ајах. 
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На момент написания данной книги Мсгозой Айаѕ находился в процессе 
пазработки, но первые реализации скоро должны быть доступны. Менеджер 
проекта Аіаѕ, Скотт Гатри (5сой Сие), публикует материалы, имеющие 
отношение к Ајах (ВИр://\е1055.азр.пе/зсо и /агсһіуе/2005 /06/28/ 
416185.азрх). 

Библиотеки ЈЅОМ-КРС, ориентированные на различные языки програм- 
мирования, находятся по адресу ВИр://\\\.]зоп-грс.ог/пиар/1.хЬ 111. 


Часть Ш 


Создание 
профессиональных 
Ајах-приАожений 


Теперь ваше Ајах-приложение может взаимодействовать с сервером, по- 
лучать от него информацию и обновлять хранящиеся на нем данные. Однако, 
если вы хотите, чтобы ваш продукт был по достоинству оценен пользовате- 
лями, вам рано останавливаться. В этой части вы узнаете, как добиться того, 


чтобы приложение было простым в использовании, защищенным и работало 
достаточно быстро. 





В этой главе... 


• Основные характеристики практичного кода 
• Принципы работы системы оповещения 

. Набор базовых средств для оповещения 

• Выделение измененных данных 
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В главе | мы обсуждали практичность — одно из основных качеств при- 
кладной программы. Независимо от того, насколько грамотно написан код 
какие применены технические решения, если приложение недостаточно прак- 
тично, у пользователя останется плохое впечатление от него. Может быть 
программистам это и покажется несправедливым, но положение вещей имен- 
но таково. Глядя на фотографию Альберта Эйнштейна, обыватель вряд ли 
поймет, что этот человек внес огромный вклад в формирование научной кар- 
тины мира, но отметит его неряшливый внешний вид и всклокоченные воло- 
сы. Первое впечатление о человеке или предмете очень важно для формиро- 
вания отношения к нему. 

В главах 2-5 мы рассмотрели важные технологии и решили ряд интерес- 
ных задач, пользуясь подходом, специфическим для Ајах. Дальнейший нащ 
разговор пойдет в основном о том, как оформить их. Надо заметить, что рас- 
смотренные примеры внешне выглядят достаточно грубо. Это не удивитель- 
но, ведь мы уделяли основное внимание изяществу самого решения. Теперь 
нам надо выяснить, что мы можем сделать, чтобы пользователю понравилось 
созданное нами приложение и он согласился работать с ним по нескольку ча- 
сов в день. Темы, рассмотренные в данной главе, призваны помочь читателю 
правильно представить Ајах-приложение внешнему миру. 


Одна из мер, которые необходимо принять для того, чтобы ваши поль- 
зователи чувствовали себя комфортно, — информировать их о событиях, 
"скрытых" за интерфейсом. Более того, сделать это надо так, чтобы пред- 
ставленная информация органично сочеталась с остальными данными, отоб- 
ражаемыми в интерфейсе. Сведения об основных процессах, происходящих 
при работе программы, сами по себе еще не обеспечивают практичности при- 
ложения, но мы покажем, что подробная проработка деталей идет на поль- 
зу продукту в целом. Во многих Ајах-приложениях принимаются меры для 
оповещения пользователей, поэтому мы надеемся, что выработанные здесь 
решения вы сможете применить в своих проектах. 


В данной главе мы рассмотрим несколько примеров, в которых пользова- 
тель информируется о возникающих событиях таким образом, что нормаль- 
ный ход его работы не нарушается. Однако, перед тем как начать изучение 
данного вопроса, попробуем выяснить, что такое качественное приложение 
и как сделать его таковым. 


6.1. Создание качественного приложения 


Практичность — важнейшая характеристика Ајах-приложений, поскольку 
их пользователи представляют собой чрезвычайно непостоянную аудиторию. 
Возможность быстро и просто скопировать и запустить приложение — это 
не всегда благо. Пользователь, не затративший времени и усилий для того, 
чтобы начать работу с документом, может легко отказаться от него и перей- 
ти к другой УеБ-странице, каковых в глобальной сети насчитывается около 
восьми миллиардов. Ситуацию усложняет тот факт, что в настоящее вре- 
мя наблюдается сближение двух подходов к созданию пользовательского ин- 
терфейса: приложения для настольных систем и №еБ-страницы внешне ста- 
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ловятся похожи друг на друга. Создать в сложившихся условиях хороший 
интерфейс — непростая задача. Если вы не сможете ее решить, результаты 
ваших усилий по разработке бизнес-логики окажутся невостребованными. 

В главе | мы рассматривали вопросы практичности с точки зрения поль- 
зователя. Теперь попытаемся выяснить, какими качествами должен обла- 
дать код, чтобы удовлетворять требованиям практичности. В следующих 
разделах будут описаны основные характеристики, ответственные за каче- 
ство приложения. 


6.1.1. Отклик программы 


Одно из явлений, которые мешают использованию компьютера, — это преры- 
вание нормального хода работы во время выполнения некоторых операций. 
Неопытные разработчики часто допускают типичную ошибку — блокируют 
пользовательский интерфейс на время записи на диск больших конфигура- 
ционных файлов. В результате пользователь "теряет нить", т.е. забывает, что 
он собирался сделать, так как ему необходимо внутренне перестроиться и пе- 
рейти от модели предметной области, с которой он работал, к реалиям аппа- 
ратного обеспечения компьютера. 

Планируя время отклика, важно представлять себе типичную аудиторию 
вашей системы. Если запись конфигурационного файла на локальный жест- 
кий диск выполняется практически мгновенно, то запись того же файла на 
удаленный носитель в условиях большой загрузки локальной сети произойдет 
значительно медленнее, запись во флэш-память, подключенную черед порт 
ЗВ, имеет свои особенности, и т.д. Разработчики МеБ-приложений при те- 
стировании своих продуктов часто организуют взаимодействие клиента и сер- 
вера через интерфейс обратной петли; Это ошибка, так как становится невоз- 
можно оценить задержку, связанную с передачей данных. Поэтому все Мер- 
приложения должны тестироваться в реальной сети или хотя бы в системе, 
имитирующей реальное прохождение трафика по линиям связи. 


Помимо передачи данных по сети, на время отклика влияет также произ- 
водительность клиентского кода. Производительность == чрезвычайно важ- 
ная характеристика приложения, и мы уделим ей внимание в главе 8. 


6.1.2. Надежность 


Приложение считается надежным, если оно способно сохранять работоспо- 
собность в условиях рабочей станции, перегруженной другими задачами. Как 
отреагирует программа на временный выход из строя сети? Если некий про- 
цесс в течение пяти минут полностью займет ресурсы центрального процессо- 
ра, возобновит ли после этого работу приложение? Недавно в рамках проекта, 
в котором участвовал один из авторов книги, проверялась надежность прило- 
жения. Одним из тестов было беспорядочное нажатие клавиш клавиатуры в 
течение десяти секунд. Другой тест предполагал перемещение курсора мыши 
по странице с периодическими щелчками правой и левой кнопками. Несмотря 
на кажущуюся примитивность данных тестов, они очень эффективны. 
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Какие недостатки станут видны в результате подобного тестирования? 
При этом может быть выявлена низкая эффективность обработчиков собы- 
тий. Нажатие клавиш, перемещение курсора мыши и другие подобные дей- 
ствия требуют быстрой обработки, поскольку такие события могут повто- 
ряться часто. Они также помогают обнаружить нежелательную взаимную 
зависимость между компонентами. Например, модальное диалоговое окно 
в составе пользовательского интерфейса может блокировать доступ к осталь- 
ным элементам приложения, а открытый пункт меню не позволит обратить- 
ся к модальному окну. Если подобная ситуация возникает достаточно редко, 
то, для того, чтобы обнаружить ее, могут потребоваться месяцы ежедневной 
работы пользователя. Если же приложение становится доступным тысячам 
пользователей, то хотя бы один из них столкнется с упомянутым эффектом 
уже через несколько часов. Описать подобную ошибку достаточно трудно, 
а воспроизвести ситуацию по описанию — еще сложнее. Вовремя выявляя 
проблемы и исправляя ошибки, вы увеличите общую надежность приложе- 
ния. Это будет способствовать повышению надежности гораздо больше, чем 
выбивание дроби на клавиатуре. 


Очень полезно, если в процесс тестирования приложения, помимо разра- 
ботчика, будут вовлечены потенциальные пользователи. Новичок может дать 
полезную информацию о практичности приложения, а пользователь, хорошо 
знакомый с предметной областью, может оценить качество выполнения кон- 
кретных функций. Если тестированием занимается разработчик программы, 
он "видит" код и подсознательно избегает выполнять некоторые сочетания 
действий в определенном контексте. Конечный пользователь не обременен 
такими знаниями и свободен в выборе, если, конечно, разработчик не под- 
сказывает ему, что надо сделать. Привлечение посторонних к проверке при- 
ложения ускоряет выявление ошибок и способствует повышению надежности. 


6. 1.3. Согласованность 


Как уже упоминалось выше, на практичность Ајах-приложений существен- 
ное влияние оказывает тенденция к сближению программ интерфейсов для 
настольных систем и МеБ-страниц. Некоторые инструменты, ориентирован- 
ные на Ајах, например Віпаожѕ, доохӣоо и ВасКкбаѕе, даже предлагают на- 
боры компонентов, которые выглядят подобно кнопкам, деревьям, таблицам 
и другим элементам пользовательского интерфейса, типичным для настоль- 
ных систем. 

Теперь, чтобы создать качественное приложение, надо одновременно быть 
разработчиком Међ-страниц, специалистом по вопросам практичности и ко- 
нечным пользователем. Наилучший совет в данной ситуации — обеспечить 
согласованность различных частей приложения. Если в одной части програм- 
мы для отображения окна с дополнительной информацией требуется один 
щелчок мышью, а в другой части такое же окно открывается двойным щелч- 
ком, пользователь будет испытывать неоправданные затруднения в процессе 
работы. Если же руководство по выбору пути в пределах У\еБ-узла выполне- 
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до вами в виде говорящего поросенка, следите за тем, чтобы он внезапно не 
сменил одежду или не изменил произношение. 

С точки зрения кода приложения согласованность и пригодность к по- 
вторному использованию неотделимы друг от друга. Если вы создадите в че- 
тырех местах программы кнопки, в ответ на активизацию которых будут 
выполняться стереотипные действия, а впоследствии по требованию заказ- 
чика измените три кнопки, но пропустите четвертую, то это будет первый 
шаг к рассогласованию компонентов. Если для обработки действий с различ- 
ными кнопками вы используете один обработчик, это будет способствовать 
согласованности приложения. Такое решение повлияет не только на внешний 
вид и поведение кнопок, но и на другие особенности интерфейса, например, 
время тайм-аута или реакцию на неверно введенные данные. 


6.14. Простота 


Простота — важное качество приложения. Адах позволяет разработчику дать 
волю фантазии и воплотить совершенно новые решения. Многие из них были 
невозможны потому, что отсутствовали необходимые для этого технологии. 
Однако в ряде случаев, прежде чем программировать то или иное средство, 
надо спросить себя, а необходимо ли оно в приложении. Меню, которые ска- 
чут по экрану, постепенно уменьшая амплитуду скачков, наверное, выглядят 
забавно. Возможно, программисту приятно было отвлечься на время от ру- 
тинной работы и сделать полушутливый интерфейс. Однако такое решение 
вряд ли будет одобрено пользователем, который должен работать с приложе- 
нием по нескольку часов в день. 

Итак, прежде чем реализовывать новый элемент или изменять поведение 
существующих компонентов, необходимо тщательно продумать, способствует 
ли подобное решение продуктивной работе пользователя. Во многих случа- 
ях при использовании Адах ответ на заданный вопрос будет положительным, 
и разработчик сконцентрирует свое внимание на разработке тех средств, ко- 
торые действительно улучшают качество приложения. 


6.1.5. Как получить результат 


Вряд ли ваше приложение в полной мере удовлетворяет всем перечисленным 
выше требованиям. Нам, во всяком случае, пока не удавалось создавать такие 
программы. Сказанное ранее можно рассматривать как характеристики иде- 
ального приложения. Стремление к идеалу — прекрасное качество. Его надо 
постоянно развивать, применяя грамотные подходы при разработке новых 
программ и реструктуризируя уже существующий код. Правильно выбрать 
точку приложения усилий — это искусство, граничащее с магией, и преуспеть 
в нем можно, только проверяя свои знания на практике. Если вы раньше не 
занимались реструктуризацией, начните с небольших программ и постоянно 
работайте над ними. Помните, что реструктуризация предполагает поэтапное 
улучшение кода, поэтому не стоит отвергать уже готовое решение и переде- 
лывать программу с нуля. 
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Далее в этой главе будет рассмотрен ряд средств, которые можно ре- 
ализовать в рамках Ајах-приложения. Мы уделим много внимания опове- 
щению пользователя о процессах, скрытых от него, например, о вычисле- 
ниях или обмене по сети. Предоставляя пользователю информацию о ходе 
работы программы, мы повышаем качество взаимодействия с приложени- 
ем. Реализуя оповещение посредством общего базового набора средств, мы 
обеспечиваем согласованность и упрощаем работу пользователя. Если все 
сообщения оформлены по одному и тому же принципу, пользователь луч- 
ше воспринимает их. 

Рассмотрим различные способы оповещения пользователя о событиях, 
возникающих во время работы программы. 


6.2. Предоставление сведений пользователю 


При работе Ајах-приложения очень часто возникает необходимость обраще- 
ния по сети и загрузки ресурсов с сервера. В получении результатов обычно 
участвуют функции обратного вызова. При синхронной обработке запросов 
к серверу процесс взаимодействия по сети так или иначе находит отражение 
в пользовательском интерфейсе. Инициализация запроса приводит к тому, 
что элементы интерфейса блокируются и в течение некоторого времени не 
реагируют на действия пользователя. После получения результатов содер- 
жимое окна клиентской программы обновляется и пользователь снова по- 
лучает возможность взаимодействовать с приложением. Подобное решение 
реализуется очень просто, однако пользоваться такой программой неудобно. 
По этой причине мы будем использовать асинхронные запросы, однако при 
этом процесс обновления данных существенно усложняется. 


6.2.1. Поддержка ответов на собственные запросы 


Рассмотрим конкретный пример. В главе 5 мы создали приложение для про- 
смотра информации о планетах. Оно позволяло пользователям обновлять 
некоторые свойства, в частности, задавать диаметр планеты и ее расстояние 
от Солнца (см. раздел 5.5). Информация, введенная пользователем, передава- 
лась на сервер, а в ответе сервера содержались сведения о том, приняты или 
отвергнуты изменения. В разделе 5.5.3 было введено понятие очереди команд; 
следуя этому принципу, мы рассматривали каждый ответ сервера как опо- 
вещение о некоторых обновлениях, выполненных по инициативе конкретного 
пользователя. Ответ представлял собой ХМГ-документ, содержащий инфор- 
мацию об успешно выполненных или отвергнутых командах. 


<соттапаѕ> 

<соттапа і14='001 аіатеѓег ѕќаїиѕ='оКк' /> 
<соттапа 11='003 аібеао' ѕіаѓиѕ» 'Ғаіеа' 
теѕѕаре='уаџе оці оЁ гапве'/> 
</сопитапаѕ> 


Пользователь, работающий с приложением, редактирует свойство и при- 
нимается за другую задачу, может быть, даже переходит к другому окну. На- 
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пример, обновив сведения о диаметре планеты Меркурий, он больше не уде- 
ляет внимание этому вопросу. В это время значение для обновления оформ- 
ляется в фоновом режиме в виде ЈауаЅсгірі-объекта Соттапа, который поме- 
щается в очередь исходящих сообщений, а затем передается серверу. После 
этого объект Соплтап перемещается в массив ѕепї и извлекается оттуда при 
получении ответа. В составе ответа может содержаться информация сразу 
о нескольких обновлениях. Объект Соттапа отвечает за обработку обновле- 
ния и выполнение необходимых действий. 


Давайте вспомним, какой вид имел код приложения перед началом ре- 
структуризации. Ниже показан код метода рагѕеКеѕропѕе () объекта Сот- 
тара. Именно так мы сформировали его в главе 5. 

рІапеѓѕ.соттапаѕ. ОражеРгоремуСоттапа 

„рагзеВезропзе=Ё@ипсйоп(9осЕ!1){ 

уаг аёігѕ=аосЕ1.аїїгібиѓеѕ; 

уаг ѕіаіиѕ=аїігѕ.веҸатеаіќет("ѕѓаіиѕ").уаие; 
1? (збашз!="оК"){ 

уаг геазоп=ат$.геМаштедЦет("теззазе").уаше; 
аІеті("Ғаеа їо ирдае "+111$.Не1а 

+" то "+1015.уаше+"\ п\п" +геаѕоп); 


} 

} 

Начнем его реструктуризацию. Если обновление было осуществлено 
успешно, ничего не происходит. Локальная модель предметной области уже 
была обновлена перед передачей информации на сервер, поэтому модели на 
стороне клиента и на стороне сервера синхронизированы. В случае неудачи 
мы генерируем сообщение. Такое сообщение легко сформировать, но, как мы 
увидим, оно плохо вписывается в концепцию практичной программы. 

Давайте вернемся к пользователю, который уже успел забыть о плане- 
те Меркурий. Неожиданно он получает сообщение наподобие следующего: 
ГаПе ќо ирдайе аШе4до ќо 180 уаше ои оѓ гапее. Вне контекста такое 
сообщение совершенно неинформативно. Мы можем изменить текст, чтобы он 
выглядело приблизительно так: ЕаИе їо ирӣаѓе аШФедо оЁ Мегсигу..., 
но при этом действия пользователя все равно прерываются, а именно это- 
го мы и хотели избежать, переходя к асинхронной обработке сообщений. 

В данном случае может возникнуть и более серьезная проблема. При реа- 
лизации полей редактирования передача данных серверу инициируется по со- 
бытию опбшг. Метод оп г () получает управление тогда, когда поле редак- 
тирования теряет фокус ввода, причем потеря фокуса может быть вызвана 
появлением окна с сообщением. Таким образом, если пользователь отредак- 
тировал свойство и начал вводить значение другого, ввод может прерваться 
на середине. В результате неполные данные будут переданы на сервер, а это 
приведет к генерации следующей ошибки, или, что еще хуже, модель может 
быть обновлена на основе некорректной информации. 

Необходимо более элегантное решение, чем обычное окно с сообщением. 
Но, прежде чем заняться его разработкой, завершим разговор об обновлении 
Модели. Рассмотрим ситуацию, когда несколько пользователей одновременно 
обновляют модель предметной области. 
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12.2. Обработка обновлений, выполненных другими 
пользователями 


'усматриваемое приложение допускает одновременную работу различных 
юльзователей, поэтому редактирование данных может осуществляться сра- 
у с нескольких клиентских машин. Каждый пользователь хотел бы иметь 
перативную информацию об изменениях, внесенных другими участниками. 
Іодобные требования типичны для большинства приложений, предполагаю- 
ших взаимодействие браузера с \еБ-сервером. 


Для того чтобы учесть данное требование, мы должны модифицировать 
[МІ-ответ и очередь объектов Соттапа следующим образом. Для каждого за- 
роса, предполагающего обновление модели предметной области на стороне 
ервера, должна генерироваться метка с информацией о времени (временная 
[етка). Процесс, выполняющийся на стороне сервера, который учитывает 
бновления, должен проверять модель, выявлять недавние изменения, вне- 
енные другими пользователями, и включать их в возвращаемый документ. 


Ъперь полученный ответ будет выглядеть приблизительно так, как показа- 
о ниже. 


• «геѕропѕеѕ ирӣӢаѓеТіте='1120512761877'> 

<соттапа 11='001 діатеѓег ѕіаіиѕ='ок'/> 

<соттапа 11='003 аІбеао' ѕіаїиѕ= 'Ғаеа' 
теѕѕаре='уајџие ош оЁ гапее'/> 

<ирдае рІапе11='002' беіаМате='іѕѓќапсе' 
уаше='0.76’ иѕег='јіт'/> 

</теѕропѕеѕ> 

Помимо дескрипторов <соттапаі>, содержащих идентификаторы объектов 
оттапа, в составе ответа присутствует также дескриптор <ираӣаїѓе>, который 
данном случае определяет расстояние от Венеры до Солнца. Значение этого 
войства, равное 0,76, задал пользователь Јіт. Кроме того, мы можем доба- 
ить к дескриптору верхнего уровня атрибуты, состав и назначение которых 
ы обсудим несколько позже. 

Ранее запрос передавался серверу только в том случае, если в очереди 
рисутствовали команды. Теперь нам надо получать сведения об обновлении, 
следовательно, придется запрашивать сервер даже тогда, когда очередь пу- 
га. Для того чтобы это стало возможным, нам надо изменить код в несколь- 


их местах. Модифицированный объект СоттапіОпеџе показан в листинге 6.1. 
[зменения выделены полужирным шрифтом. 


ЛИСТИНГ 6.1. Объект СоттапдОчеце 

// О Глобальная ссылка 
пеё.стаОцеце$-пем Аггау(); 

// © Дополнительные параметры функции 


пег. Соттапа Оцене=Рипс от (іа, игі, оп Ордате, #гед) { 
{61$.14=14; 


пеё.ст@Оцеие$ [19] - 161$; 
618. игі =0г1; 
ЕҺіѕ.аоеџед=пет Агкау(); 
(615.зепе=пем Аггау () ; 
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Е215.опОрааее-опОрдаее; 

// 0 Инициализировать 
повторные обращения 

1Е (Ехеа){ 

(615. гереаф (Ёгед) ; 


} 

Ер15.1азЕОрдабеТ1пе»о; 

} 
пеЕ.СопмарЯОчеце .ргобобуре . Ёї геВвеаџоеѕё= Ёопсёіоп () { 
1Е (!661$.опОраабе && ЕҺ1ѕ.аоџеџеа.1еподёһ==0) { 
геіогп; 

} 

// Временная метка 

уаг даёа= 

"1аѕЕ0ОрдӢаёбе«" +Еһіѕ.1аѕЕ0ОрдӢаёсеТіте 
+"&ааёа="; 

Ғог (уар 1=0;і<Еһіѕ.соџеџеа.1еподёҺ;і++) { 

уаг спа=+һіѕ.ачеџеа [1]; 

іЯ (ЕҺ1іѕ.іѕСоптапа (ста) ) { 

даса+= ста. соВеаоезЕ$ек1юа (); 
Һіѕ.ѕепі [ста.іа] =ста; 





С 

} 

} 

(615$ .аценеяа=пем Аггауо; 
Е615.1оадег=пем пе .Сопёепі1оайег ( 
Е 
п 





Пле: 
её .Соптападиоепое.оп1оаа, пеі . Сотпападиецџе.опеггог, 
"РОСТ" , Часа 
| 
} 
пе . Соптападоеџе.оп1оаа=Ёопсёіоп (1оадег) { 





уаг хт1ірос=пеі . гед. гезропѕехмі; 

уаг е1 росКооі=хп1рос.дееЕ1епепёѕВуТад\атпе ("геѕропѕеѕ") [0]; 

уаг 1аѕіОрӣаёе=е1 росВКооё .аёігіриоёеѕ.оеєМапедтіет ("ирдӢаёетТіте") ; 
1Е (рагѕеїІпі (1аѕЕ0рдӢаіёе) >Еһіѕ.1аѕЕ0рдӢаёетіте) { 

// О Обновленная временная метка 
еҺіѕ.1аѕЕ0рдӢаёсетіте=1аѕЕ0рааѓе; 

} 
1Е (е1росВоо$) { 
Еох (1=0; Ке1 росКооё . сһі1аМодеѕ.1еподёһ;і++) { 
е1сһі1а=е1росКооё .сһі1а№одеѕ [1]; 

1Е (еісһі1а.подемате«-"соптапа") { 














уаг аёёгѕ=е1сһі1а.абігірибеѕ; 

уар 1а=абегз .чеЕсМанейтТеЕем ("1а") .уа1іџе; 
уаг соппапа=пеѓ . Соптападиеџе.ѕепі [іа] ; 
іЕ (соптапа) { 

соппапа.ракѕеКеѕропзе (еїісһі1а); 

} 

}е1зе 1Е (е1СЬ11а.поаеМате=="арааее") { 
1Е (6015. 1ир1етмере$Еиапс ("опОрдаее")) { 
// © Обновленный обработчик 
Е15.опОраабе.са11 (Еһ1ѕ,е1сһі1а); 

} 

} 
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) 
} 
} 
// 0 Опрос сервера 
пеѓ . Соппапаодиелпе .ргоёоіуре.кереаё= Ёопсёіоп (Ёгед) { 
ЕҺіѕ.опгереаё (); 
1Е (Егед>0) { 
еһіѕ.Ёгеа- Ёгед; 
уаг ста= "пе . спддиецеѕ [ "+651$.149+"] . #ігеВеацеѕё {) " ; 
ЕҺ15. гереаёсег=ѕеі1піегуа1 (спа, Ёгеа* 1000); 
} 
} 
// О Включение/отключение повторных обращений 
пеѓ . СоштапЯОчеце . ргоёоіуре.опгереаі= Ёцпсііоп () { 
1Е (Еһіѕ.гереаіег) { 
с1еагІпёегуа1 (ёһіѕ.гереаёег); 
} 


Ећ15ѕ.гереаёег=пи11; 


=] . 





Рассмотрим новые функции, которые мы реализовали, изменив код. 

Во-первых, введена глобальная ссылка на очередь объектов Соттара О. 
С необходимостью этого шага приходится смириться, учитывая ограничения 
метода ѕеї1 піегуа1 (), которые мы рассмотрим несколько позже. Конструк- 
тору СоптпапаОџеџе передается в качестве параметра уникальный идентифи- 
катор, и объект регистрируется в элементе массива, соответствующем иден- 
тификатору. 

Теперь при вызове конструктора СоттапдОцеие указываются два новых 
параметра ®. В качестве параметра оп0Орааѓе передается объект ЕипсИоп, 
используемый для поддержки дескрипторов <ирдае>, который теперь мо- 
жет присутствовать в составе ответа. Параметр їгед задает числовое зна- 
чение, определяющее интервал в секундах между последовательными обра- 
щениями к серверу за информацией об обновлении. Если значение не равно 
нулю, конструктор инициализирует обращения к функции гереаї () ©, в ко- 
торой для организации повторного выполнения кода использован встроен- 
ный метод ЈауаЅсгірі зе и{егуа[. Метод ѕеї1пїіегуаі () и метод ѕеіТітеои, 
предоставляющий аналогичные возможности, допускают параметры, задан- 
ные лишь в виде строк, поэтому нельзя непосредственно передавать ссылки 
на код, подлежащий выполнению. Чтобы обойти эту проблему, мы исполь- 
зуем в теле функции гереаї () глобальную переменную и уникальный иден- 
тификатор. Мы также сохраняем ссылку на временной интервал и можем 
в любой момент прекратить периодический опрос сервера, вызвав функцию 
ипгереа( () в, в теле которой осуществляется обращение к сІеагіпёегуаі1. 

Ранее, если очередь команд оказывалась пустой, метод Е ігеКедиеѕії О 
завершал работу. Теперь проверка выполняется несколько по-другому. При 
установленном обработчике опОр4а{е работа функции продолжается, неза- 
висимо от того, есть ли в очереди элементы. Если очередь пуста, то серверу 
передается пустой запрос, на который сервер передает ответ, содержащий де- 
скрипторы <ир4ае>. Вместе с результатами редактирования мы теперь по- 
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сылаем значение времени, сообщая серверу о моменте внесения изменений ©. 
Эту информацию сервер использует для того, чтобы правильно сформиро- 
вать передаваемую информацию об обновлении. Значение времени хранит- 
ся в виде свойства очереди команд и первоначально устанавливается рав- 
ным нулю. 

Информацию о времени мы передаем в формате, принятом в системе Чшх 
для хранения даты, т.е. сообщаем число миллисекунд, прошедших с 1 января 
1970 года. Такой выбор продиктован соображениями переносимости. Если бы 
мы выбрали формат более удобный для чтения, нам пришлось бы уделять 
внимание интернационализации и обеспечению адекватного представления 
на других платформах. Вопросы интернационализации имеют большое зна- 
чение для А] ах-приложений, так как для большинства из них планируется 
доступ по глобальной сети. 

В функции опоаа () мы добавили код, необходимый для обновления со- 
храненной информации о времени О и для разбора дескрипторов <ирдае> 
0. Функция обработчика опОр4а{е вызывается в контексте очереди команд, 
а элемент РОМ, соответствующей дескриптору <ирӣаѓе>, передается ей в ка- 
честве параметра. 

Для приложения, содержащего модель Солнечной системы, функция, ко- 
торая выполняет роль обработчика обновления, представлена в листинге 6.2. 


Листинг 6.2. Функция ирааїіеРіапеѕ() ДЦ: 


Ғопсёіоп ораасеР1Тапесз (ирааёетТад) { 

уаг аіігірѕ=ирдаёсетТад.асігіриёеѕ; 

уаг р1апеё1а=аёёгірѕ.оесмМатеа1ёсетс'р1апеё1а") .уа1іпе; 
уаг р1Іапеі=ѕо1агЅуѕёет.р1Іапеёѕ [рІапеё1ај; 

1Е (р1апеі) { 

аг Ё1а=аёёгірѕ.деёмМатеатбет ("#іе1аМатюе") .уа1ое; 
уаг уа1=аіёгірѕ.одесмМапеаІібет ( "уа1џе") .уа1пџе; 

1Е (р1апеб. Ела) { 

рІіапеї [Ета] =уа1; 

}е1ѕе{ 

аїегіё ('опкпотп р1апеЕ аёсікіриёе *+Е1а); 

} 

}е1зе{ 

аїегі ('опкпоип р1апеё іа '+р1апеё1а); 

} 

) 





Атрибуты дескриптора <ирӣаѓіе> предоставляют нам всю информа- 
цию, необходимую для обновления модели предметной области на уровне 
ЈауаЅсгірі. Конечно, данные, полученные с сервера, могут быть некоррект- 
ными, поэтому нам надо предусмотреть на этот случай соответствующие дей- 
ствия. Например, можно вывести сообщение с описанием проблемы, форми- 
руемое с помощью функции а1егі (). Этот вопрос обсуждался в разделе 6.2.1. 

Теперь мы реализовали более сложное поведение очереди объектов Сот- 
тапа, в частности, предусмотрели поддержку обновлений, выполненных дру- 
гими пользователями, включили в состав данных, которыми обмениваются 
клиент и сервер, информацию о времени и предусмотрели включаемый об- 
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работник обновления. Итак, мы несколько продвинулись по пути решения 
вопроса об асинхронном обновлении модели предметной области и инфор- 
мировании пользователя о внесенных изменениях. В следующем разделе мы 
рассмотрим вопросы представления информации и влияние ее на нормаль- 
ный ход работы пользователя. Там же мы постараемся отказаться от функ-' 
ции а1егї () в пользу более подходящего решения. 


6.3. Создание системы оповещения 


Функция а1еті, которую мы применяли до сих пор, позволяет реализо- 
вать лишь примитивное решение, типичное для ранних периодов развития 
Јауа$Ѕсгірі, когда М№еһ-страницы были в основном статическими, а фоновая 
активность — минимальной. Внешний вид окна с сообщением не поддается 
контролю средствами С$$, поэтому, работая над профессиональным продук- 
том, желательно разработать механизм оповещения, используя технологии, 
применяемые для остальной части пользовательского интерфейса Адах. Тем 
самым обеспечивается дополнительная степень гибкости приложения. 

Если вы проанализируете существующие вычислительные системы, то 
увидите, что в них используются самые различные средства оповещения, раз- 
личающиеся и по степени воздействия на пользователя. Менее всего привле- 
кают внимание такие эффекты, как изменение вида курсора мыши (класси- 
ческий пример песочных часов в системе М№Міпаӣожѕ) или добавление к пик- 
тограмме, представляющей объект, дополнительных элементов, которые поз- 
воляют судить о состоянии папки. Такие простые индикаторы представля- 
ют минимум информации. Более детальные сведения о фоновых событиях 
можно получить, прочитав сообщение в строке состояния. И наконец, самым 
информативным является диалоговое окно. На рис. 6.1 показан пример ис- 
пользования соглашений об оповещении, принятых для окружения рабочего 
стола в системе Чшх. 

В данном случае папка 1051+# оџпа не доступна текущему пользователю, 
поэтому к ней добавлено изображение замка. Строка состояния в нижней 
части окна предоставляет более подробную информацию о содержимом пап- 
ки и В то же время не отвлекает пользователя от основной работы. Окно 
с сообщением об ошибке отображается тогда, когда пользователь пытается 
открыть папку, к которой он не имеет доступа. В этом случае действия поль- 
зователя прерываются явно, так как он должен немедленно отреагировать 
на сообщение. 

В отличие от рассмотренных способов оповещения, функция а1егі () при- 
менима лишь для отдельных случаев. Хотя решение, предполагающее ее при- 
менение, реализуется просто, его нельзя назвать изящным. Если мы стре- 
мимся достичь надежности, согласованности и простоты, имеет смысл раз- 
работать базовые средства для оповещения пользователя, которые будут при- 


меняться во всем приложении. В следующих разделах мы постараемся сде- 
лать это. 





Рис. 6.1. Соглашения, принятые для предоставления информации о состоянии. Внешний 
вид пиктограммы отражает характеристики объекта (в данном случае права доступа), строка 
состояния позволяет получить общие сведения, а модальное диалоговое окно — подробную 
информацию об объекте. В данном случае в качестве примера приведена среда рабочего 
стола Упк, но аналогичные соглашения действуют во всех популярных графических 
интерфейсах 


6.3.1 Основные принципы оповещения 


В качестве первого шага нашей работы определим, как должно выглядеть 
сообщение, предоставляющее информацию пользователю. Логично пред- 
положить, что в него следует включить текстовое описание и, возмож- 
но, пиктограмму. 

Если мы оповещаем пользователя о действиях, предпринимаемых в фоно- 
вом режиме, то некоторые сообщения окажутся важнее других. Вместо того 
чтобы в каждом отдельном случае решать, следует ли отобразить сообще- 
ние, лучше определить универсальные уровни приоритетов и применять их 
к каждому сообщению. 

В общем случае нам необходимо сообщить пользователю некоторые све- 
дения, которые тот может принять к сведению или отвергнуть. Некоторые 
из сообщений достаточно важны и должны отображаться до тех пор, пока 
пользователь не отключит их явным образом, а другие имеют смысл только 
в течение ограниченного времени. Ряд сообщений может удалиться без вме- 
шательства пользователя. Например, информация о том, что клиент ожидает 
получения данных по сети, нужна лишь до активизации функции обратного 
вызова. Если данные будут приняты до того, как пользователь удалит сооб- 
щение, оно автоматически перестанет отображаться. В некоторых случаях, 
например при получении новостей, имеет смысл задать определенное время 
Жизни, по истечении которого сообщение должно быть удалено с экрана. 

Объект Мезѕѕаве, код которого приведен в листинге 6.3, создан с учетом 
этих требований. Этот объект реализует универсальный механизм оповеще- 
ния пользователя. Установив модель оповещения, мы можем оформлять со- 
общения различными способами. 
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Листинг 6.3. Объект Меѕѕаве 


уаг тб=пем Објесії); 

газе. РКТОКІТҮ. ТОМЬ { 14:1, Пғейте:30, ісоп:"іте/150 Іо.рпе" Ј; 
пе.РКІОКІТҮ РЕЕАОГТ= 19: А ПҒеііте:60, ісоп:"іте/50 йеЁрпе" }; 
по? РКОКПУ НІСН= { іа:3, 1Піғебіте:-1, ісоп:"іте/т58 һі.рпр" }; 
п159.пеѕѕареѕ=пеу Аггау(); 
115$. Меѕѕаре=Ғипсііоп {іа , теѕѕаве,ргіогіѓу, Пейте, 1соп){ 
һіѕ.1а=іа; 

иза.пеззааез [1а] «іһіѕ; 
һіѕ.меѕѕасде=пеѕѕаде; 
Һіѕ.ргіогібу= (ргіогіёу) ? ргіогііу : пза.РЕТОВТТУ_ РЕҒАОІТ.іа; 
Һіѕ.1іҒебіте- (1іҒебітме) ? 11Ееблме : 66515$.АеЁЕао1 1,1 Ғеёбіте (); 
Һіѕ.1ісоп» (ісоп Ј ? ісоп : іһ1ѕ.дӢеҒаџ1б1соп(); 
Е (Еһіѕ.11іҒеёіте>0) { 
21$. ҒадӢег=ѕеёТітмеои+ ( 











ты ст с с 








Ећ1ѕ.11і Ғебіте*1000 

); 
> 

} 

759 .Меѕѕасде.ргоіоёуре.с1еаг= Ёопсііоп () { 

иза.пеззачез [Ећ1іѕ.1а1«пи11; 

) 

759 .Меѕѕаде .ргоіоіуре, аеЕаз1 Е Т,1 Ёеёбіме= Ёџпсііоп () { 
1Е (Еһіѕ.ргіогіёу<=тѕод.РКІОВКІТҮ ТОоИ.іа) { 

хебаги за. РКІОКІТҮ ТОИ. 11Ғеёбітме; 
}е1зе 1Е {ЕҺіѕ.ргіогіёу==ю59.РВІОВІТҮ _ОЕРАОГТ. 19) { 
хебогп шза.РВТОВТТУ_ПОЕБАОШТ. 11Ееб1ме; 
}е1зе 1Е (ЕҺ1ѕ.ргіогіёу>=ю59.РВІОВІТҮ НІОСН.іа) { 
гебоги тмѕо.РЕІОКІТҮ НІСН.11Ғебітме; 
1 

) 


759 .Меѕѕаде .ргоіоіуре.ЯӣеҒац1ё1соп= Ёџпсііоп () { 
1Е (Еһіѕ.ргіогіёу<=тѕод.РКІОКІТҮ ТОоИ.1іа) { 
геіогкп иза.РВТОВТТУ_ТОМ.1соп; 
Је1ѕе 1Е (Еһіѕ.ргіогіёу==тѕ9.РКІОВКІТҮ РрЕҒАОІТ.іа) { 
геіогп тѕд.РВКІОВІТҮ РрЕҒА0ОІТ.ісоп; 
Је1ѕе 1Е (Еһіѕ.ргіогіёу>=мѕ9.РВКІОКІТҮ НІСН.іЯ) { 
геіогп м59.РЕІОВКІТҮ НІСН.ісоп; 


} 





























Для системы оповещения мы определили глобальный объект 115, вы- 
полняющий функции пространства имен. В нем содержится ассоциативный 
массив, позволяющий обращаться к любому сообщению по его уникальному 
идентификатору. Схема генерации идентификаторов зависит от конкретного 
приложения. 

Уровни приоритета, низкий, средний (он же приоритет по умолчанию) 
и высокий, определяются с помощью констант. В соответствие каждому при- 
оритету поставлены пиктограмма и время жизни (задаваемое в секундах). 
Пиктограмму и время жизни можно переопределить с помощью необязатель- 
ных параметров, предусмотренных в конструкторе. Время жизни, равное -1. 


п59.пеѕѕадеѕ [ ' "+Еһіа.іа+"'].с1еаг () ", ! 


| 
1 


І 
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Рис. 6.2. Интерфейс системы оповещения в виде строки 
состояния. Сообщения отображаются в виде пиктограмм 


Рис. 6.3. Информацию о сообщении в строке состояния можно 
получить, поместив курсор мыши на пиктограмму. В результате 
на экране отобразится окно с подсказкой 


> 


(Залается для высокоприоритетных сообщений. Оно указывает на то, что со- 
ббшение не должно автоматически удаляться; решение о прекращении его 
;Отображения принимает либо пользователь, либо функция обратного вызова. 


Ы.2. Определение требований к пользовательскому 
интерфейсу 


Применяя термины МУС, мы можем сказать, что нами только что была опи- 
сана модель системы оповещения. Для того чтобы системой можно было 
пользоваться, надо определить представление. Существует много способов 
визуального отображения информации, предназначенной для пользователя. 
В данном случае мы выберем вариант строки состояния, в которой инфор- 
мация будет отображаться в виде пиктограмм (рис. 6.2). 

Пиктограмма с красным знаком Х — стандартное средство оповещения на 
вязком уровне. Третья слева пиктограмма на рисунке — это шар синего цвета, 
отбрасывающий тень; данная пиктограмма переопределяет изображение Х. 
используемое по умолчанию. Более подробную информацию о сообщении, 
^соответствующем каждой пиктограмме в строке состояния, можно получить 
$окне подсказки (рис. 6.3). 

[ Такой механизм оповещения нельзя назвать навязчивым. Строка состоя- 
* шя занимает относительно мало места на экране, но появление новой пикто- 
траммы заметно для пользователя. Срочные сообщения надо сделать более 
заметными, поэтому мы отображаем в строке состояния только низкоприо- 
^ригетные сообщения. Информация с более высоким приоритетом выводится 
-В диалоговом окне (рис. 6.4), которое отображается на экране до тех пор, 
дюка пользователь не удалит его. 

Т Диалоговое окно может быть модальным и немодальным. В случае мо- 
рального окна остальные элементы интерфейса блокируются до тех пор, по- 
$& окно не будет закрыто. Закрытое окно отображается в виде пиктограммы 
к правой части строки состояния. В следующих двух разделах мы обсудим 
реализацию описанных средств. 


(В ега'з а са? р/ауіюо іље радріреѕ 
оуег (деге 


сію пате @зсоуегей Шаї Ше 
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Рис. 6.4. Высокоприоритетные сообщения отображаются 
в диалоговом окне и распопагаются в нём в соответствии 
с их приоритетами 


6.4. Реализация базовых средств оповещения | 


Мы определили два основных элемента пользовательского интерфейса: стрск! 
ку состояния и всплывающее диалоговое окно. Теперь приступим к их реаЦ 
лизации. Система оповещения достаточно сложна, поэтому разобьем работу 
над ней на отдельные этапы. Сначала модифицируем объект Меззасе так] 
чтобы он мог обеспечить свое отображение в разных ситуациях когда <ж 
представлен в строке состояния в виде пиктограммы, при выводе окна под-*] 
сказки или в составе всплывающего диалогового окна. Начнем с реализации: 
строки состояния. 


6.4.1. Отображение пиктограмм в строке состояния 


Строка состояния должна отображаться на экране и содержать пиктограм-' 
мы, представляющие активизированные сообщения. Обязанности по воспро- 
изведению конкретных пиктограмм мы делегируем объекту Меззаге. Его 
можно описать в терминах архитектуры МУС. Средства отображения рас- 
сматриваются как представление, а интерактивные элементы выполняют 
роль контроллера. Если бы мы предполагали использовать произвольные ме- 
ханизмы отображения, то столкнулись бы с серьезными проблемами при ре- 
ализации системы оповещения. Однако мы не планируем подобное решение. 
Более того, для обеспечения согласованности в пределах приложения надо 
использовать единый механизм оповещения. В листинге 6.4 показан метод, 
предназначенный для воспроизведения объекта Меззаее. 


Листинг 6.4. базовые 'Средства отображения сообц&йрй“^ < * * -""-Щ 
//О Воспроизведение сообщения 
гаѕо.Меѕѕаде .ргоіоіуре . гепаег=ЕапсЕт1оп (е1) { 

1Е (51$ .рхг1ог1$у<=иза.РВТОВТТУ ТОМ, та) { 

ЕҺіѕ.гепӣегбта11 (е1); 
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1е1зе іғ (Еһіѕ.ргіогібу>=тѕд.РЕІОВХТХ _ПРЕРАОШТ. 19) { 
еҺіѕ.гепаӢегЕо11 (е1); 

} 

) 





// @ Вывести в качестве пиктограммы с поддержкой 
// окна подсказки 

пза.Меззадае .ргобобуре .хепаегбта11=ЁЕопсЕе1оп{е1) { 
еҺіѕ.ісота=доситмепёі .скеасеЕ1етепе ("Яіу"); 

уаг ісо=аосотепё . скеасеЕ1етепе ("іта"); 
ісо.ѕгс=һіѕ.ісоп; 
1со.с1азМагае="иза_зта1Т_1соп"; 
ЕҺіѕ.ісота.аррепасһі1а(ісо); 
ЕҺіѕ.ісота.тмеѕѕасдеорј=Еһіз; 

(615$ . ісота. опмоцзеоуег=пза .поуегТсопТоо1е1р,- 
еҺіѕ.ісота. оппооѕзеооі =т59 . поо 1соптТоо1ёір; 
ЕҺіѕ.ісота.опс1іск=тѕо.с1іск1соптТоо1бір; 
е1 .аррепасһі1а(Еһіѕ.ісота) ; 


} 




















// ® Помещение курсора мыши над кнопкой 
тѕ9 .поуегІсоптТоо1ёір= Ёопсбіоп (е) { 

уаг еуепі=е || млпдом.еуепе; 

уаг пеѕѕасе=һіѕ.теѕѕадеорј; 

уаг рорред=теѕѕасде.рорреа; 

іҒ ('рорреа) { 

теѕѕаве. ѕһомі?орир(еуепі, Ға1ѕе); 


} 
} 


// О Перемещение курсора мши за пределы кнопки 
из .почЕТсопТоо1Е1р=ЕаисЕтот (е) { 
уа” пеѕѕасде=һіѕ.тмеѕѕасдеорј; 
уаг роррей=гпеѕѕаве.роррей; 
уаг ріппеа=теѕѕаде.ріппеа; 
1Е {рорреа && 'ріппеа) { 
пеѕѕасде.һідерРорир (); 
} 
) 
// 0 Щелчок мышью 
тѕ5.с1іскісопТоо1ір=Ёипсііоп {е) { 
уар еуепё=е || м1п@ом.еуепе; 
уаг меѕѕасде=һіѕ.тмеѕѕасдеорюј; 
уаг роррей=теѕѕаде.рорреа; 
уаг р1ппедя=пеззаде.р1ппеа; 
уар бхрігей=теѕѕаде.ехрігеа; 
1Е (рорреа && ріппеа) { 
пеѕѕасе.һідерРорир{); 
1Е (ехрігеа) { 
пеѕзѕасе.опгепаег (); 
} 
}е1зе{ 
пеззасче . зВомРорир (еуепЕ.Егиае); 
} 
} 
// © Вывести окно с подсказкой 
759 .Меѕѕаде.ргоёоёуре . зПомРорир=ЕсисЕ1оп (еуепе ‚ р1ппед) { 
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һ15.ріппеда=ріппеа; 

Е (1єһіѕ.рорир) { 

61$ .рорир=аосимепе . скеаёсеЕ1егаепі ("аху"); 
һіѕ.рорир.с1аѕѕМапе= 'рорир' ; 
һ15ѕ.гепдӢекЕи11 (ёһіѕ.рорир); 

осопепі . роду .аррепасћһі1а (єһіѕ.рорир); 











һіѕ.рорир.зіу1е.дізѕр1ау= 'р1оскК'; 

ах рорХ=еуепі.с1іепЕх; 

аг рорҮ=еуепі .с11іепёҮ-хНе1ідћһі (661$ .рорур) -12; 
о\уеТо (ёһіѕ- рорир,рорх,рорү); 

Е {иза.роррег && шза.роррек!=Е 61$) { 
59.роррег.ҺһідерРорирёЁ); 











тоо Зым а 4 т оасан:а 


һіѕ.рорреа=ігие; 
пѕо.роррег=ёһізѕ; 
} 


// Скрыть окно с подсказкой 

059 .Меѕѕасде.ргоёбобуре . пі дӢеРорир= Ёџпсііоп () { 
12 (Еһіѕ.рорреа) { 
1Е (Еһіѕ.рорир) { 
{61$.рорир.з6у1е.915р1ау='попе' ; 
} 
$51$.рорреЯ=ЁЕа1$е; 
} 

сЕ: х т 





Мы реализовали для объекта Меѕѕаре высокоуровневый код отображения 
и определили детали представления в строке состояния. Начнем с высоко- 
уровневого кода. Метод гепӣег () О получает в качестве параметра элемент 
РОМ. В зависимости от приоритета сообщения он передает управление либо 
методу геп4егэтаП() ®, либо методу гепдегЕи1К) ©. В строке состояния 
представлены только сообщения с низким приоритетом, которые отобража- 
ются в виде пиктограмм. При помещении на такую пиктограмму курсора 
мыши выводится окно с подсказкой (рис. 6.2 и 6.3). 

Функция геп4егзта!о отображает пиктограмму в составе элемента 
РОМ и устанавливает обработчики событий, в процессе работы которых вы- 
водится подсказка. 

Поскольку в данной главе мы стараемся придать Ајах-приложениям про- 
фессиональный вид, средства поддержки подсказки полностью определены. 
В работу с подсказкой вовлечены обработчики трех событий. Когда курсор 
мыши помещается над пиктограммой О, подсказка отображается на экране 
до тех пор, пока курсор не будет перемещен с данного элемента ©. По щелчку 
на пиктограмме подсказка "фиксируется" ©. В этом случае она будет удалена 
с экрана либо в результате повторного щелчка, либо при отображении другой 
подсказки (в каждый момент времени на экране может отображаться только 
одно окно с подсказкой). 
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6.4.2. Отображение подробных сообщений 


В диалоговом окне выводятся высокоприоритетные сообщения либо сообще- 
ния, имеющие приоритет по умолчанию. Они отображаются в виде пикто- 
грамм, сопровождаемых строкой текста (рис. 6.4). Такое же представление 
требуется нам для окон подсказки, соответствующих пиктограммам в строке 
состояния. Функция ѕһоуРорирО, отвечающая за вывод подсказки, обраща- 
ется к методу гепаегЕи | {), который отображает детальное сообщение. Этот 
же метод используется для представления информации в диалоговом окне. 
Такой подход исключает неоправданное дублирование кода и, кроме того, 
обеспечивает согласованность внешнего вида различных элементов пользо- 
вательского интерфейса. Код метода гепӣегЕшіі () приведен в листинге 6.5. 


ЛИСТИНГ 6.5. Метод гепіегЕи11 О у -ЦЦ 
0152. Меѕѕаве.ргоѓоїуре.гепаегЕш! =ѓипсќаоп(е1){ 


уаг шТае=(е14аМате=="ГВОРУ"); 

уаг ќорЕ1= пи; 

115.гоу= доситепі.сгеаѓе ЕІетепі("г"); 
1 (ИшТаШе){ 

СорЕ1=Чосотейе . сткеабеЕ1етеп® { "ёаріе") ; 
уаг роа=ӣосиотепі . скеаёеЕ1етмепё ("роду") ; 
СорЕ1 .аррепасћһі1а (роа) ; 

роа.аррепасћһі1а (Е61$.ком); 

}е15е{ 

СорЕ1=61$.ком; 


} 























уаг ісоТа=досотепё . сгеабсеЕ1етепё ("ба"); 
ісота.хуа1ісдп сепёег'; 
ЕҺіѕ.гои.аррепасһі1а(ісота) ; 

уар ісо=доситепі . сгеаёеЕ1етепі { "ітд"); 
ісо.ѕгс=Еһіѕ.ісоп; 
ісота.с1аѕѕмате= "тѕд_ 1агоде ісоп"; 
ісоТа.аррепасћі1а(ісо); 








уаг хЕТа=аоситепі. сгеаїеЕ1іетепі("а"); 
{хЕТГа.уа еп -'бор’; 
їхіТа.с1аѕѕ Мате= "595 їехі"; 
118.гоу.аррепасһііа{їхіТа); 
їхіТа.іппегНТМ 1.=1һіѕ.теѕѕаее; 


е1.аррепаСь а ({орЕТ); 





Метод гепдегРи| () генерирует строку таблицы. Он проверяет элемент 
Ром и, если тот представляет собой дескриптор <Фо4у>, непосредственно 
включает его в таблицу. В противном случае генерируются необходимые де- 
скрипторы <{а е> и <Фоду>. Такой подход позволяет включать в таблицу, 
содержащуюся в диалоговом окне, несколько сообщений и в то же время 
обеспечивает корректное заполнение элемента <4іу> в окне подсказки. 
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Заметьте, что мы не используем здесь методы МЗС РОМ, текст сообще- 
ния включается в состав таблицы посредством свойства шпегНТМГ. Это от- 
крывает дополнительные возможности по представлению НТМГ-элементов 
по сравнению с генерацией обычного текстового узла. 


6.4.3. Формирование готовой системы 


Наданном этапе нами полностью реализована поддержка пиктограмм в стро- 
ке состояния и отображение текста сообщений. За вывод диалогового окна 
и строки состояний отвечает высокоуровневый метод геп4ег(), код которого 
показан в листинге 6.6. 


Листинг 6.6. Функция пп. гепаег () 


иза.гкепаег=ЕопсЕ1оп (мѕодраг) { 
іЕ (!тмѕодраг) { 
мѕдраг= 'тѕодраг'; 
} 
// О Обеспечить вывод строки состояния 
пза.пзарагр1у=хбесЕ1етепеВуТа (изафак); 
1Е (!059.юѕӧрагріу) { 
759 .мѕодрагріу=тю59.сгкеаёеВаг (шзафаг); 
} 
ѕіу11па. гепоуед11сСһі1агеп (иза.шзафахкр1\); 
уар 1омз=пем Аггау (); 
уаг пуейѕ=пеу Аггауо ; 
уаг Һісдһѕ=пеқ Аггау (); 
// @ Сортировать сообщения в соответствии с приоритетом 
Еог (уар і іп юѕ9.теѕѕадеѕ) { 
уаг пеѕѕасде=тѕдо.тмеѕѕадеѕ [1]; 
1Е (меѕѕаде) { 
1Е (меѕѕаде.ргіогіёу<=тѕод.РВІОКІТҮ _ТОМ.19а) { 
1оиѕ.аррепа (теѕѕаде) ; 
}е1зе 1ЁЕ (гаеѕѕаде.ргіогіёу==тѕд.РКІОКІТҮ РрЕғҒА0Т.іа) { 
пеа$ .аррепа (меѕѕаде) ; 
Је1ѕе 1Е (теѕѕаде.ргіогіёу>=тѕо.РВІОВІТҮ НІСН.іЯ) { 
1190$ .аррепа (теѕѕаде); 
} 
} 
} 
// © Воспроизвести низкоприоритетные сообщения 
Ғог (уар 1=0;1і<10оиѕ.1епоёһ;і++) { 
10уѕ Ё1] .кепаек (мѕ9о.тѕдрагріу) ; 
} 
// О Воспроизвести сообщения с высоким и средним приоритетом 
1Е (юеаѕ. 1епоёһ+һідһѕ.1еподёһ>о) { 
759 .діа1од=хбеёЕ1емепіВу1а (мтѕдраг+"_діа109"); 
1Е (!м59.діа1од) { 
059 .діа1од=т59.сгеаёеріа1од ( 
изараг+" _Я1а1оа", 
п59 .мљѕдрагріу, 
(һісһѕ.1еподёһ>0) ); 
// О Обеспечить отображение диалогового окна 
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ѕіу11іпа. гепоуеднсһі1агеп (мз9.Я1а1оа.ЕЪоа); 
Еог (уар 1=0;і<һідһѕ.1еподҺ;і++) { 
$190$[1].хепаег (мѕо.діа1осд.іроа); 
} 
Ғог (уаг 1=0;Кшеаз .1епаЕВ; 1++) { 
шеаз [1] . гепаӣег (мтѕд.даіа1од.ёроа) ; 
} 
1Е (Һісһѕ.1епоёһ>0) { 
иза.Я1а1о0о9.1со.зхкс=мза .РВТОВТТУ_НТСН.1соп; 
}е1ѕе{ 
пза.Я1а1о0о9.1со.зкс=мза .РВТОВТТУ_РЕЕАОПТ.1соп; 
} 
) 
} 
// О Создать строку состояния 
изд .скеасеВак=ЕопсЕ тот (іа) { 
уар тѕдраг=досотепі . сгеаёбеЕ1етмепі ("діу"); 
тѕадраг.с1аѕѕмМате= 'тѕдраг' ; 
изараг, 19=1а; 
уаг рагепіЕ1=аосомепі .роау; 
рагепёЕ1 .аррепа{тѕадраг) ; 
геёогп пзараг; 
} 
// в Создать диалоговое окно 
пза .скеасер1а1о9=ЕопсЕ1оп (іа, баг, 1$Мо@а1) { 
уар діа1од=досотепі . сгеаёбеЕ1етепі ("діу"); 
аіа10о9.с1аѕѕМатме='діа109' ; 
Я1а1оа.1а=1а; 
уаг Ері =аосипепі . сгеаёеЕ1епепі ("ёар1е"); 
аіа109.аррепасһіта(ЕЫ1); 
аіа1о9. Ероа=ӣосотепі . сгеаёеЕ1етмепё ("Ероду") ; 
ері .аррепасһі1а (аіа1ос.іроа); 
уаг с1озеВ аб боп=Чосимеп®. сгеаёбеЕ1етепі (" аіу" ); 
с1оѕеВоиіёоп.діа1осд=аіа1од; 
с1оѕеВвиёёоп.опс1ііск=тѕӯо.һійеріа1од; 
уаг с1озеТхЕ=аосомепе . сгеаёсеТехіМоае ("х"); 
с1оѕеВвиёёоп.аррепасћһі1а (с1оѕетхі) ; 
аіа1о9.аррепасһі1а (с1оѕеВвиёёоп) ; 
// О Добавить модальный уровень 
1Е (15Моаа1) { 
аіа109.тода1Іауег=йоситепё . сгеаёеЕ1етмепі ("діу") ; 
даіа10о9.пода11ауег.с1аѕѕмМапе='пода1' ; 
аіа1о9.тода11ауег.аррепасһі1а (дӢіа1од); 
дӢоситепё . роу . аррепасһі1а (91а1оа.поЧа1Тауег); 
}е1зе{ 
Ч1а1оа.с1аз ѕ=Мапе+=' поп-пода1'; 
аосотепі . роду . аррепасћі1а (аіа1од) ; 
} 






























































аіа1ов.ісо= іоситепі. сгеаїе Е1етепі("іте"); 
аіаіов.ісо.с1а5ѕ5 Мате="тѕ5 іа ов ісоп"; 
41а1о5.1со.А1а|1 о =41а105; 
Ч1а105.1со0.опс1сК=тз8-5Вом Ота[05; 
баг.аррепасћі1а(аіа1ов.ісо); 

геїигп Яіа1іоғ; 
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// Скрыть диалоговое окно 
тѕе.һіаеріаіов = Ғипсііоп (е) { 
уаг 41а102$(1{61$.А1а1о02) ? 111$. А1а1о$ : тѕр.аіа1ор; 
і? (41а!1о8){ 
1Е (аіа10о9.пода11ауег) { 
аіа1о9.пода11ауег.ѕёу1Іе.адіѕр1ау=' попе! ; 
}е1зе{ 
діа1о9д.ѕіу1е.аіѕр1ау= 'попе' ; 
} 
} 
} 
// Отобразить диалоговое окно 
п59 . ѕЅћотріа1од= Ёцпсёіоп (е) { 
уаг Я1а1оа= (ёһіѕ.дӢіа10д) ? Е61$.Ч1а1оа : шза,Я1а1оа; 
1Е (Ч1а1о9) { 
1Е (Я1а1оа.тоаа1Ъауех) { 
9іа109.мода11ауег.ѕіу1е.йіѕр1ау* р1оск! 
}е1зе{ 
аіа1о0о9.ѕёу1е.аіѕр1Іау= 'р1Іоск'; 
} 
} 
} 





К функции геп4ег() можно обращаться многократно. В процессе рабо- 
ты она проверяет присутствие компонентов пользовательского интерфейса 
О, © и по мере необходимости создает их, используя функции сгеайеО1а1о5 
© и сгеаїіеВаг ©. Для формирования компонентов интерфейса используют- 
ся стандартные методы обработки элементов РОМ. Обработчики событий 
позволяют отображать и скрывать диалоговое окно. 

Для воспроизведения всех сообщений система сначала сортирует их по 
приоритету и размещает в трех временных массивах @. Затем низкоприори- 
тетные сообщения выводятся в строке состояния ©, а остальные — в диалого- 
вом окне, причем первыми располагаются высокоприоритетные сообщения О. 

Для того чтобы реализовать модальное окно, мы помещаем видимые сред- 
ства поддержки диалога в элемент ОІУ, занимающий весь экран, и блокиру- 
ющий все события, связанные с мышью ©. Для модального элемента ОГУ 
определен белый фон с прозрачными пикселями. По этому признаку можно 
отличить модальное окно. Мы не используем установки прозрачности С$5$, 
потому что в этом случае любой вложенный элемент будет также прозрач- 
ным. Файл С55 для системы оповещения представлен в листинге 6.7. 


Листинг 6.7. Содержимое файла тд. еѕѕ 
•п59_ ѕма11_ісоп{ 

Белое: 32рх; 

міаєһ: 32рх; 

роѕіёіоп:ге1абіуе; 

Е1оае :1еЕС; 

} 

• 79 јі1іа10од ісоп { 

Белое: 32рх; 

міаєһ: 32рх; 


роз! 110 : ге|1аё1уе; 
НоаЕ: 12 НЕ; 
1 


* 1158 Іагве_ ісоп { 
Һеіеһё: 64рх; 
міаһ: 64рх; 

} 


01586 їехі{ 
Ғопїі-Ғаті1у: агіа1; 
Ғопі-муеівһі: 11286; 
Ғопі-ѕіле: 14р; 
со1ог: Бше; 


} 


‚падра { 
роѕіііоп:ге1абіуе; 
раскагоцпа-со1ог: мб1ее; 
рогаег: ѕо1іа Б1ае 1рх; 
міаєһ: 100$; 

Һеісһё: 38рх; 

раааіпод: 2рх; 


.аіа1од{ 

роѕіёіоп: арзо1аее; 
раскагоцпа-со1ог: ућііёе- 
рогӣег: ѕо1іа Б1ае 1рх; 
міаєһ: 420рх; 

сорте 64рх; 

Іеғі: 64рх; 

рааа1па: 4рх; 


.рорчр{ 

роѕіёіоп; а бзо1аее; 
раскакоипа-со1ог: мЬ1Ее; 
рогаег: ѕо1іа Б]1ае 1рх; 
раааіпсд: 4рх; 

} 


.поп-поаа1 { 
} 


.поаа1 { 

роѕіііоп: арѕо1піе; 
Сор: Орх; 

ІеЁ: Орх; 

міаєһ: 100%; 
Һеісһё: 100%; 
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раскагооџпа-ітасе:иг1 (1и9/мо@а1_оуег1ау.91Ё); 


259 


260 Часть Ш. Создание профессиональных А/ах-приложений 


Рис. 6.5. Использование С55-атрибутов 1 о аї позволяет 
размещать пиктограммы в контейнере любой формы. 

В данном примере мы задали квадратную строку состояния; 
пиктограммы автоматически перекомпоновались с учетом 
выравнивания по левому и правому краю 





Следует заметить, что в СЅЬ-классах п15=_зтаП_1соп и п1$_ Яіаіов ісоп 
используется стиль Ноа. Класс п$# зтаП ісоп применяется для вос- 
произведения пиктограмм, соответствующих низкоприоритетным сообщени- 
ям. Эти пиктограммы располагаются в ряд, начиная с левого края. Для 
1152 Чаю» ісоп задано выравнивание по правому краю. Базовые средства 
позволяют отображать строку состояния любой формы и любого размера. 
Плавающие элементы располагаются в строке состояния в ряд; при заполне- 
нии текущего ряда формируется следующий ряд (рис. 6.5). 

Теперь, когда мы создали пользовательский интерфейс для объекта Мез- 
заге, надо модифицировать сам объект. Создаваемые сообщения должны 
иметь возможность включать самих себя в состав пользовательского ин- 
терфейса и удаляться по окончании действия. В листинге 6.8 показаны 
изменения, которые необходимо внести в состав кода, чтобы обеспечить 
эти возможности. 


Листинг 6.8. Модифицированный объект Меѕѕаде 


уаг тѕе=пеу Објесі(); 

п5е.РКОЕТУ ГО\У= { іа: 1, 1Пғеііте: 30, 1соп: "іте/тѕе 1Іо.рпе" }; 
115е.РКОЕТТУ РЕРАЧЛ={ 14:2, 1іғеіте:60, 1соп:"1т/тз_АеЁ.рпз" Ј; 
1152. РОТУ НІСН= { 14:3, Шеймше:-1, 1соп: "їпе/тѕв 1 .рпе" }; 
11$5.теззарез=пем\ АггауО; 

иза.Я1а10о49=по11; 

иза.мзаВахр1\у=0о11; 

159. ѕирргеѕѕВКепдег=Ға1ѕе; 

из .Меѕѕаде= Ғопсііоп (1а, теѕѕасде,ргіогііу, 11 Ёеіітме,ісоп) { 
еһ1іѕ.іа=іа; 

759 .пеззасвез [іа) =+һізѕ; 

һіѕ.пеѕѕасде=теѕѕаде; 

Һіѕ.ргіогібу={ргіогііу) ? ргіогіёу : мза. РЕТОВТТУ_ _РЕғА0ІТ. іа; 
Һіѕ.1іҒебітме= (11Ғеёбіте) ? 1іҒғебіте : іһіѕ.ЯдеҒаџ1ё1іҒебіте (); 
Һіѕ.ісоп= {ісоп) ? ісоп : іһіѕ.дӢеҒаоџ1ё1соп(); 

Е (Е515$.11Ееб1те>0) { 

һіѕ. Ғадег=ѕеёбТітеоиё ( 

"мѕс.пеѕѕадеѕ [' "+һіѕ.іа+"'].с1еаг()", 

еһ1ѕ.11Ғеёбіте*1000 

); 

} 

// О Дополнительные параметры 

1Е (!м$4а.зирркеззВепаехг) { 

(615$.аббасЬТоВат(); 

















аа ааа! 
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} 
} 


// @ Дополнительные параметры 
159 .Меѕзѕаде .ркобобуре .аёсёасһтТоВаг= Ёопсііоп () { 
1Е (!иза.шзафахкрту) { 
пза.хгепаек(); 
}е1зе 1Е (51$ .рктог1Еу==мза . РВЕТОВТТУ_ТОМ. 19) { 
ЕҺіѕ.гепадег (иза.мзафакр1\у); 
Іе1ѕеі 
1Е (!п59.діа1од) { 
759 .діа1о9д=тѕ9. сгеаёеріа1од ( 
иза.пзарахр1\у.1а+" _Ч1а1оа", 
иза.пзарагр1у, 
(51$ .рх1ог1еу==мза .РВТОВТТУ_НТСН.1а) 
); 
} 
(615 .хепаек (пза.Я1а1о9.ЕБоа); 
иза.зромО1а1оа(); 
} 
} 





759 .Меѕѕасде.ргоіоіуре.с1іеаг= Еопсііоп () { 
пѕ9 .меѕѕадеѕ [6һіѕ.іа] =пи11; 
// & Дополнительные параметры 
іЯ (Еһіѕ.гот) { 
ЕҺіѕ.гоу. ѕіу1е.діѕр1ау=' попе! ; 
СһҺіѕ. гот. пеѕѕадеоюј ' ^пи11#- 
ЕҺіѕ.кои^пи11; 


} 

і? ((61$.1соТа){ 
{615$.1соТа.з(у1Те. 415 р1ауз'попе'; 
{01$.1со Та. шезза»е ОБ] =пи!1; 
1һіѕ.ісоТа=п011; 


} 








Мы стремимся упростить работы с системой, поэтому при создании со- 
общения оно автоматически включается в состав пользовательского интер- 
фейса О. Для того чтобы обеспечить воспроизведение нового сообщения, до- 
статочно вызвать конструктор объекта. В зависимости от приоритета сооб- 
щения оно будет помещено либо в строку состояния, либо в диалоговое окно 
©. Если нежелательно воспроизводить каждое сообщение, например, когда 
мы добавляем одновременно несколько сообщений, предусмотрен флаг, поз- 
воляющий отменить автоматическое отображение. В этих случаях после со- 
здания всех необходимых сообщений мы можем вручную вызвать функцию 
11$2.гепаег(). 

Удаляя сообщения с помощью функции сІеаг(), мы автоматически уда- 
ляем соответствующие элементы пользовательского интерфейса ©. 

Итак, мы получили комплект базовых средств, упрощающих оповещение 
пользователей. Мы можем включать оповещение вручную или применять со- 
зданную систему в составе других компонентов, предназначенных для по- 
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вторного использования. В следующем разделе будет продемонстрирована 
совместная работа системы оповещения с объектом Сопѓепі оайег Пользо- 
вателю будет предоставляться информация о загрузке объектов по сети. 


6,5. Предоставление информации в запросах 


В главе 5 мы представили объект Сощмеп оа4ег, инкапсулирующий сетевой 
трафик. Применим систему оповещения для информирования пользователя 
о состоянии запроса. Начнем с формулирования общих требований. 

При передаче запроса серверу мы должны сформировать низкоприори- 
тетное сообщение о том, что данный запрос обрабатывается. Для того чтобы 
отделить запрос по сети от других оповешений с низким приоритетом, мы 
изменим внешний вид пиктограммы. Будем использовать для представления 
сообщения данного типа условное изображение земного шара. Оно присут- 
ствовало в программе просмотра информации о планетах, которая рассмат- 
ривалась в главах 4 и 5. 


По окончании обработки запроса сообщение должно быть удалено. Вместо 
него следует создать другое низкоприоритетное сообщение о том, что запрос 
обработан успешно, либо сообщение со средним приоритетом о возникнове- 
нии ошибки. 


Для того чтобы реализовать подобное поведение, нам надо создавать объ- 
екты Меѕѕаре на определенных этапах жизненного цикла запроса, а именно: 
при его инициализации, а также по завершении или получении информа- 
ции об ошибках. Модифицированный код объекта Сошеп Гоа4ег показан 
в листинге 6.9. 


Листинг 6.Э.-Объект СомепШоадег с оповещением пользователя 


пе .СопіепіІоадаег= Ёоџпсёіоп( ... ) 
Е 








пе .СопіепёІоадег.тм591а=1; 
рее .СопіепёІоааег.ргоіоіуреа 

1оаахмірос : Ёопсііоп {игі , теёћоа, рахамз ‚ сопіепёТуре) { 
1Е {Імеёћһоа) { 

пеёһоа= "СЕТ"; 

} 

1Е {ІсопіепіТуре && пеіћһоа=="РОЅТ") { 

сопсепЕеТуре= 'арр1ісаёіоп/х-ут- Ёогт-иг1епсодеа' ; 








1Е (иіпаоу. ХМІНЕбрКеацеѕі) { 

ЕҺі5ѕ.гед=пеу ХМІНЕёрВеаоеѕі () ; 

} е1ѕе 1Е (иіпаоу.Асііуехорјесё) { 

ЕҺіѕ.геа=пеу Асііуехорј есі ( "МісгоѕоЁі . ХМІНТТР"); 


1Е (661$.кеан 

Суу { 

уаг 1оадег=ёһіѕ; 

ЕЋ1ізѕ. геа. опгеадуѕіаёсесһапде= Ёџпсііоп () { 
Іоадег.опКеадубіаёе.са11 (1оааег) ; 

) 
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{61$.геа.ореп ( те{Воа, игі, гие); 

і?  (сомепЕТуре)1 

{61$.геа. зе Кедиеѕї Неайег('Сопїіепі- Туре', сошмеп(Туре); 
} 

// О Оповещение об инициализации запроса 
ЕҺіѕ.побіҒісасіоп=пеуит шза.Меззасе ( 
"пеіОО" +пеѓ . СопіепіІоайег.тюѕо1а, 

"1оааіпо "+иг1, 

п59.РКІОКІТҮ 1ОоИ.іЯ, 

Е р 

"іма/ра11-еагіһ.ді#Ё" 

| 

реЕ.СопеепеГоаает.тза19++; 

ЕҺіѕ. гед. ѕепа (рагатмѕ); 

}саёсһ (егг) { 

ЕҺіѕ.опеггог.са11(ёһіѕ); 

} 


} 
Ь 


опВеадуЅіаќбе : Ёошпсёіоп () { 
уаг геа=Еһіѕ.гед; 

уар геаду=геа.геадуббаіе; 
Е (хеаду==пеі .КЕАРрүҮ ТАТЕ ___ СОМРІЕТЕ) { 
аг Һісрѕіаёсиѕ=геа. ѕёсасиѕ; 
е! 


























і 

У, 

1Е (Һебрзёаіиѕ==200 || ҺЕбрбёабиѕ==*0) { 
Еһіѕ.оп1оаа.са11 (651$); 

// @ Удаление существующего оповещения 
ЕћҺіѕ.побі#Ғісаёіоп.с1іеаг{); 
} 
15 
} 

} 

} 





е1зе{ 
р1$5.опеккох.са11 (61$); 





, 


// © Сообщение об ошибке 

ЗеЕао1 Е Ехгкох : Ёопсёіоп () { 

уаг пзаТхЕ="егког Ғеёсһіпс даба!" 

+ "<о1х1і>креайубёаёе: "+6615. геа. геадуЅіаёе 








+"<1і>ѕіаёиѕ: "+Еһіѕ. геа. ѕёіаіиѕ 
+"<11>Беадегз: "+Еһіѕ. кеа.десАНВезропзеНеа@ексз () 
ае 


1Е (Еһіѕ.побіғісабіоп) { 
ЕҺіѕ.поёі#ісаёбіоп.с1іеаг(); 

] 

ЕҺіѕ.поёбіЁхсаііоп=пем тюѕ9.Меѕѕаде ( 
"реб еггоо" +пеі. Сопёепі1Іоайег .тмѕо1а, 
пзаТтхе,шза. РЕТОВТТУ __РОЕЕАОПТ.1а 

); 
пе .СопёепёІоадег.тюѕдіа++; 


} 
> ^ 
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Когда мы создаем запрос посредством вызова ІоайахмІ.Юосі), мы форми- 
руем оповещение О и связываем ссылку на него с объектом Сопїепі[оайег. 
Заметьте, что время жизни устанавливается равным -1, поэтому сообщение 
не будет автоматически удаляться. 

В методе опКеайуЅіаїе() мы удаляем сообщение при благополучном за- 
вершении операции +). При наличии ошибки мы вызываем метод Яеѓаџ1#Ег- 
гог(), который формирует соответствующее сообщение =>. Чтобы сообщение 
лучше воспринималось пользователями, вместо обычного текста для его фор- 
мирования применяются средства НТМІ. 


В листинге 6.10 показан пример страницы, в которой используется моди- 
фицированный объект Сощеп оааег 


Листинг 6.10. Страница, предусматривающая оповещение пользователя 
<!ПОСТУРЕ Һемі РОВЬТС "-//МЗС//РТЬ ХНТМЬ 1.0 
ЗЕЕТСЕ//ЕМ" 

"Һер: / /млммм.м3 . ога/ ТВ / хҺет11/0ртр/хһіті1-56гісі.аєса"> 
<рЕм1> 
<ћеаа> 
<Е16Е1е>МоЕ1ЁЕ1сае1отз ёбеѕі<Уііё1е> 
<1іпк ге1=зсу1езреее ёбуре="бехі/сѕѕ" ҺгеЁ= "тѕод.еѕѕ"/> 
<ѕсгірі ёуре= "ёехі/јауаѕсгірі" ѕгс= "х/х соге. јз"Х/зсгірё> 
<ѕсрірі ёбуре= "сех /јауаѕсгірі" ѕгс= "ехігаѕ-аггау.јѕ"х/ѕсгірё> 
<ѕсрірі іёуре= "ехе /јауаѕсгірі" зѕгс= "ѕіу1іпод.јѕ"></ѕсгірі> 
<ѕсрірі ёуре= "іехё/јауаѕсгірі" ѕгс= "тѕд.јѕ"></ѕсгірі> 
<зск1рЕ іёуре= "ёехё/јауаѕсгірі" ѕгс= "пес поі у. јѕ"Х/зсгірі> 
<ѕсгірі ёуре= "сех /јауаѕсгірё"> 
мілпаом.оп1оаа= Ёопсііоп () { 

159. гепаег ('тѕдраг'); 

} 


уаг пз919=1; 











Ғџпсііоп ѕиртіЄ0гі() { 

уаг ог1=аоситепё ,деёЕ1 емепіВутІа{ 'ок1Іраг') .уа1пе; 

// О Запрос к. серверу 

уаг 1Іоайег=пеу пе . СопіепіІоадег (оиг1,поёіЁу1Іоадеа) ; 


} 








Ғопсіёіоп поёіҒуІоайедғ) { 

// © Оповещение о том, что ресурс загружен 

уаг ЯЧопеМмза=пем 159 .Меѕѕаде ( 

"аопе00"+тзата, 

"1оадеа ЕВаЕ геѕоџгсе уои аѕкеа Ғор: "+Еһіѕ.цгІ, 
пза.РЕТОВТТУ 1ОИ.іа 

е 

иза1а++; 

пза.гепаег ('шзоЪаг‘); 


} 


</зсх1рЕ> 

</ћеаа> 

<роау> 

<аіу с1аѕѕ='сопіепё'> 

<р>Беге 1$ зоме сопбепе. Тһіѕ іѕ иһаб ЕЪе иер 
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рис. 6.6. В окне подсказки, 
которое отображается при 
помещении курсора на 
пиктограмму, содержатся 
сведения об успешной 
загрузке ресурса 





24%: 


СКТ 


еггог ѓеїсһіпд даба! 


* геадуЅіаіа:1 
Рис 6.7. Если при обработке запроса Ё \| «=1а015:0 
возникла ошибка, информация о ней . * Веаегсз: пші 
отображается в диалоговом окне (в данном | 
случае в окне отображены два сообщения; 
второе информирует об ошибке) 





арр1ісаёіоп 1$ ир Со иһеп поё реіпо Бадаеа ѕі11у 
ру а11 ёһеѕе теѕѕадеѕ апа побіЁісаёіопѕ апа ѕіиѓЁёғ. 
<р>Туре іп а ОВЬ іп ће рох Бе1ом (Ехом Ее 

ѕате аотаіп, ѕее Сһарёег 7), апа һіё 'ѕоиртііё'. 

А ѕоџреа-ир сопіепё1оадег ёһаі опӣегѕёапаѕ һе 
поёбіЁісаііоп ѕуѕіет м111 ре іпуокеа. 

<іприё ій= 'ог1раг' буре='ёехі`/>&првр; 

<а ҺгеЁ= 'јауаѕсгірі : ѕирті0гі1 () '>зиби1Е</а> 
</аіу> 

<аіу іа='тѕвбаг с1азз='тзеБаг' > </4іу> 

</Боау> 

</ви > 


У!еЪ-страница (рис. 6.6 и 6.7) содержит простую НТМГ-форму, в которой 
пользователь может ввести ОКІ. По щелчку на ссылке забтй предприни- 
мается попытка загрузить ресурс, на который указывает ЧВГ О. В случае 
успешного завершения операции происходит обращение к функции обратно- 
го вызова — поѓіѓуІ оааеа(). Функция пойКуГоа4еа() не выполняет с ре- 
сурсом никаких действий, а лишь сообщает о его загрузке, создавая объект 
Меззаее ©. 

Заметьте, что поведение в случае успешной обработки запроса не преду- 
смотрено при реализации системы. Оно обеспечивается посредством обработ- 
чика опоаа. Благодаря такому решению система может быть адаптирована 
с учетом различных требований. В примере, приведенном в листинге 6.9, 
поведение в случае ошибки было реализовано непосредственно в коде. В ре- 
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альных приложениях не каждая ошибка, связанная с передачей данных по 
сети, настолько важна, чтобы отображать сообщение о ней в диалоговом окне. 
Мы предлагаем читателю в качестве упражнения самостоятельно добавить 
к Сощеп оа4ег параметр, определяющий приоритет сообщения об ошибке 
(либо другим способом изменить обработчик опЕггог для реализации менее 
строгой политики). 

Итак, мы продемонстрировали, как можно обеспечить взаимодействие 
разработанной нами системы оповещения с существующим кодом. В следу- 
ющем разделе мы рассмотрим альтернативные соглашения об оповещении 
и приведем пример их применения. 


6.6. Информация о новизне данных 


Система оповещения, созданная нами, предоставляет набор компонентов 
верхнего уровня, отображающих информацию о системной активности. 
В некоторых случаях пользователю требуются дополнительные сведения, на- 
пример, о том, что некоторые данные были модифицированы. В этом разделе 
мы модифицируем объект ОбјесїіМіемег, который рассматривался в главах 
4 и 5, так, чтобы он сообщал пользователю информацию о данных, недавно 
подвергшихся изменению. 


6.6. 1. Простой способ выделения данных 


Начнем решение задачи с рассмотрения простого способа выделения данных 

путем подсветки; для этой цели будем использовать инвертирование изобра- 

жения. В пользовательском интерфейсе ОбјесіМіемег используются в основ- 

ном синие и серые тона, поэтому красный цвет будет выделяться на фоне 

окружающих элементов. Первое, что нам нужно сделать, — это определить 

дополнительный класс С$$, представляющий недавно измененные данные. 
пем{ БасКэгоипа-со]ог: ШЮеОао; } 


Мы выбрали очень простой стиль. Для реального приложения этого недо- 
статочно; чтобы интерфейс выглядел хорошо, надо приложить дополнитель- 
ные усилия. В листинге 6.11 показаны изменения кода ОбјесіУіеуег, предна- 
значенные для того, чтобы выделить свойства, недавно подвергшиеся редак- 
тированию. В данном случае признак новизны данных автоматически удаля- 
ется по истечении заданного интервала времени. 


Листинг 6.11. ОбјесіМіемег, предусматривающий выделение новых данных" 
орјуіемег , Ргорегіууіеиег . ргоіоіуре. соті ЕЯ 1 =ЕапсЕ1оп (уа1пое) { 














1Е (ЕһҺ1ѕ.ёуре=орјуіемег.ТҮРЕ ЅІМРІЕ) { 
Ср1$ . уа1ае=уа1те; 

уаг уа1ріу=һіѕ.гепдегЅітр1е (); 

уаг ёа=һіѕ.уа1та; 

са. гер1асесһі1а (уа1ріу, ёа. #ікѕісһі1а) ; 
ЕҺ15.уіеиег . поі ЁуСһапде (Еһ1ѕ) ; 
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// О Установить признак новизны 
(615. зе бсабаз (орјуіеиег. $ТАТО$_МЕМ); 
} 

} 





орјуіемег .ЅТАТОЅ_ МОКМАІ=1; 
орј уіеиег . $ТАТИО$_МЕМ=2; 








орјуіеиег . Ргорегіууіеиег . ргоіоіуре. ѕзеёбёаёиѕ= Еопсёіоп (ѕёаёиѕ) { 
еҺіѕ.ѕбсаёиѕ=ѕіаіиѕ; 
1Е (Еһіѕ.Ғадег) { 
с1еагтітмеоиоі (ёһізѕ.Ёайег) ; 


} 
1 (5аіиѕ==објуіемег.5$ТАТОЅ _МОВМАГ){ 
{61$.уа1Та.с1аз5Мате='о 5] Уле\у\Уаше'’ ; 
}е15е іЁ (ѕќаїиѕ= =објуіемег.$ТАТОЅ _МЕ\/){ 
{01$.уа1Та.с1а55 Мате='о 5} У1леми\Уа!ае пем! ; 
уаг гпа="Ғаае "+пеу ПРатїе(), зе Т1те(); 
їһіѕ.уаІта.іа=гпа; 
*1ѕ.уаІТа.Ғааее=(һ1ѕ; 
// 0 Установить значение тайы-аута 
һіѕ. Ғааег=ѕеТітеоиї ("оБјуіемег.аве('" +гпа+"')", 5000); 
} 

} 


об] ууемег.аге=РГапс оп (14) { 

уаг е1 = аоситепі. веїЕетепіВу1Іа(іа); 

уаг уіемег=е1.Ғайее; 

// © Восстановить состояние по окончании отсчета времени 
уіеумег.ѕеіЅіаїиѕ(објуіемег.ЗТАТОЅ МОКМАІ); 

е1.1а-""; 

е1. Ғааее=п0и11; 





Мы определили два варианта данных: "обычные" и "новые". Можно бы- 
ло бы использовать для их идентификации логическое значение 15Ме\, но 
мы предпочли определить два признака. Такой подход допускает дальней- 
шее расширение; например, мы сможем ввести дополнительный признак для 
тех данных, которые были модифицированы и информация об обновлении 
которых передана на сервер. При фиксации изменяемых значений вызывает- 
ся метод ѕеїіЅіаїиѕ () О. В результате задается соответствующий класс С885 
и для "новых" данных устанавливается значение таймера ©. После истече- 
ния пятисекундного интервала данные переходят в "нормальное" состояние. 
(Для реального приложения время, в течение которого информация будет 
отображаться как "новая", должно быть намного больше. Интервал в пять 
секунд выбран только для проверки и демонстрации возможностей данно- 
го решения.) Объект сохраняет ссылку на таймер и может переустановить 
его значение в случае, если до истечения заданного времени возникнут но- 
вые изменения. 
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Рис. 6.8. Модифицированный объект О р је сіуіемег 
ГасЁ$ [0] >>> отображает недавно модифицированное значение 
——_ \ диаметра, выделяя его цветом фона 


Учитывая ограничения метода ѕеїіТітеоиі(), мы присваиваем обраба- 
тываемому узлу РОМ уникальный идентификатор. Это позволит снова об- 
наружить его тогда, когда таймер активизирует функцию аде() ©. Функ- 
ция аде () "приводит в порядок" идентификатор и другие временные ссылки. 
На рис. 6.8 показан внешний вид Објесіуіемег после редактирования одно- 
го значения. 

Через некоторое время данные перестанут считаться "новыми", и для них 
будет восстановлен нормальный стиль отображения. 

Изменение цвета привлекает внимание пользователя к недавно изме- 
ненному значению. Выделить данные можно также с помощью анимации. 
В следующем разделе вы увидите, что такое решение реализуется достаточ- 
но просто. 


6.6.2. Выделение данных с использованием 
библиотеки Ѕсгіріасиіоиѕ 


Мы реализовали выделение данных путем установки стилей вручную. Та- 
кой подход был выбран отчасти потому, что результаты его использования 
хорошо видны на рисунках. При работе над реальными приложениями мы 
рекомендуем использовать объекты ЕЙесі библиотеки Ѕсгіріасшоиѕ, которые 
позволяют достаточно просто "оживить" отображаемые сообщения. Данную 
библиотеку мы вкратце рассмотрели в разделе 3.5.2, и вы уже знаете, что она 
позволяет путем выполнения несложных операций организовать различные 
анимационные эффекты. 

Метод ѕеіѕіаїиѕ(), который был рассмотрен в листинге 6.11, несложно 
переписать для использования Ѕсгіріасшооѕ. Предположим, что мы хотим, 
чтобы недавно отредактированные данные "вибрировали" при отображении. 
Этого-легко добиться с помощью объекта Е есі. Риѕаїе. Такой эффект 
привлекает внимание пользователя, но, к сожалению, его невозможно пере- 
дать на статическом рисунке. Необходимые изменения в коде метода показа- 
ны в листинге 6.12. 
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Листинг 6.12. Выделение данных с помощью Ѕсгірїасиіоиѕ 
орјуїіемег . Ргорегіууіеиег . ргоёсоёуре. ѕесдіасиѕ= Ёопсііоп (ѕёаёиѕ) { 





Еһіѕ.ѕбаёиѕ=ѕёаіиѕ; 

ТЕ (Еһіѕ.еЁғесі) { 

еһіѕ.еЁҒесіё.сапсе1 (); 

ЕҺіѕ.еЁҒесіё=пи11; е: 
} 

і 

15) 

с 





Е (ѕбасиѕ==орјуіеинег.ТАТОЅ МЕИ) { 
215.еЕЕесе=пем ЕЕЕесе. Ра1засе ( 
21$ .уа1та, 

{Чпгае1от: 5.0} 

а 

) 











Ј 


Объект Ри|!5а{е берет на себя заботу по выполнению всей рутинной ра- 
боты, и нам больше нет необходимости непосредственно заниматься установ- 
кой тайм-аута. Исчезает также необходимость в функции аре (). Мы лишь 
вызываем конструктор Ри1ѕаѓе, передаем ему ссылку на элемент РОМ и ас- 
социативный массив с теми параметрами, которые мы хотим изменить. По 
умолчанию эффект Ри1ѕаїе проявляется в течение трех секунд. Мы увели- 
чили этот интервал до пяти секунд, установив параметр ига оп. 

Подобным образом можно выделить и другие данные, например, обнов- 
ления, выполненные по инициативе сервера. Для того чтобы избежать кон- 
фликтов между различными эффектами, отключаем действующие эффекты. 
(В версии Ѕсгіріасшоиѕ 1.1 ко всем эффектам применима стандартная функ- 
ция сапсе! ().) 

Эффекты, подобные описанному выше, обеспечивают мгновенную обрат- 
ную связь с пользователем, привлекая его внимание к конкретному фрагмен- 
ту данных. Диалоговое окно и строка состояния лучше подходят для пред- 
ставления более общей информации. Совместное использование различных 
способов выделения данных позволяет лучше организовать работу пользова- 
теля и повысить ее эффективность. 


6.7. Резюме 


В настоящей главе мы обсудили ряд способов, позволяющих создать более 
комфортные условия работы пользователя с Ајах-приложением. В начале 
главы рассматривались такие важные характеристики, как время отклика, 
надежность, согласованность и простота, которые в конечном итоге опреде- 
ляют качество приложения. 

Основная часть главы была посвящена способам обеспечения обратной 
связи при работе пользователя с приложением. Мы реализовали отображение 
сообщений в строке состояния и в диалоговом окне, а также средства предо- 
ставления информации пользователю путем выделения фрагментов данных. 
Включение этих средств в реальную программу существенно повысит уро- 
вень информированности пользователя о процессах, происходящих в систе- 
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ме, а оформление их в виде повторно используемых компонентов позволяет 
упростить работу разработчика. В данной главе мы продемонстрировали, на- 
сколько просто включается система оповещения в уже готовый код. В наших 
примерах строка состояния использовалась для отображения сведений об об- 
работке запросов сервером, а путем выделения фрагментов текста мы сооб- 
щали пользователю о данных, недавно подвергшихся изменениям. Данные 
средства оповещения были применены к объекту ОБес{Вто\зег, предназна- 
ченному для отображения сведений о планетах Солнечной системы. 

Интерфейс приложений несомненно имеет большое значение. Однако 
в следующих двух главах мы поговорим о не менее важных характеристиках, 
определяющих практичность приложения, таких как безопасность и произ- 
водительность. 


6.8. Ресурсы 


Библиотеку Ѕсгіріасшоиѕ Ес можно найти по адресу һіір: //\Ш .ѕсгірі. 
аси1о.иѕ/ѕсгіріасиоиѕ/11ѕ? са{егогу=ЕЁес(5. 

Дополнительные пиктограммы для примера оповещения были взя- 
ты из набора Миуо]а, разработанного Дэвидом Виньони (Ра\уа У1впош) 
(һр: //ууу.ісоп-Кіпе.сот/). 







Безопасн 
Ајат-прило 


Ъ 
ни 


В этой главе... 


Модель безопасности 
* Удаленные У\еБ-службы 


• Защита пользовательских данных, 
передаваемых по Интернету 


• Защита потоков данных Ајах 
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Наличие средств защиты — важное свойство Интернет-служб. Система 
У\е6 изначально не защищена, поэтому качество Ајах-приложения во многом 
зависит от наличия в нем средств обеспечения безопасности. Независимо ог 
того, покупает ли пользователь товары в интерактивном магазине или при- 
обретает право воспользоваться сетевыми услугами, он платит деньги, и этот 
факт еще больше повышает важность средств защиты. 

Безопасность — обширная тема, которой посвящены многие книги. 
К средствам защиты Ајах во многом предъявляются те же требования, что 
и к системе защиты классического МеЬ-приложения. Поэтому в данной гла- 
ве мы будем уделять внимание только вопросам безопасности, специфиче- 
ским для инфраструктуры Ајах. В первую очередь мы поговорим о пере- 
даче исполняемого кода по сети и мерах, которые производители браузеров 
принимают для того, чтобы сделать эту процедуру безопасной. Мы также 
обсудим шаги, которые можно предпринять для того, чтобы несколько смяг- 
чить меры предосторожности (естественно, в тех случаях, когда это допусти- 
мо). Затем мы рассмотрим вопросы защиты пользовательских данных, пе- 
редаваемых серверу, и обеспечения конфиденциальности при работе с Ајах- 
приложениями. И наконец, уделим внимание защите служб, используемых 
Ајах-клиентами, и предотвращению несанкционированного доступа к ним. 
Начнем с вопросов передачи клиентского кода по сети. 


7.1. Јауаѕбсгірі и защита браузера 


При загрузке Ајах-приложения \УеБ-сервер посылает браузеру набор Јауа- 
Ѕсгірі-команд, предназначенных для выполнения на удаленной машине, о 
которой сервер не имеет практически никаких сведений. Позволяя командам 
выполняться в среде браузера, пользователь тем самым высказывает дове- 
рие приложению и его авторам. Это доверие не всегда оправдано, поэтому 
производители браузеров предусматривают ряд мер, направленных на защи- 
ту системы и информации. В данном разделе мы рассмотрим эти меры и их 
влияние на работу программ. Мы также обсудим ситуации, в которых ограни- 
чения оказываются слишком строгими и которые желательно смягчить. Наи- 
больший интерес у разработчиков Ајах-приложений вызывает возможность 
непосредственно обращаться к У\№еБ-службам независимых производителей. 
Прежде чем приступать к подробному обсуждению данной темы, опреде- 
лим понятие мобильного кода. Любой фрагмент содержимого жесткого дис- 
ка компьютера представляет собой двоичные данные. Несмотря на это, су- 
ществует возможность отличить собственно данные от машинных инструк- 
ций, которые могут быть выполнены на компьютере. Обычные данные не 
выполняют никаких действий, по крайней мере до тех пор, пока они не бу- 
дут обработаны некоторым процессом. В первых приложениях клиент/сервер 
клиентский код устанавливался на компьютере пользователя наравне с дру- 
гими приложениями, и весь трафик, передаваемый по сети, представлял со- 
бой обычные данные. Однако в Ајах-приложениях ЈауаЅсгірі-код может быть 
выполнен. Помимо того что он предоставляет ряд интересных возможностей, 
которые не могут обеспечить обычные данные, он также может стать источ- 
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ликом опасности для системы. Назовем код мобильным, если он хранится 
на одной, машине и. может быть передан по сети для выполнения на другом 
компьютере. Компьютер, принимающий мобильный код, должен решить, до- 
веряет ли он источнику кода. Это решение становится еще более ответствен- 
ным, если исполняемый код получен из общедоступной сети. Необходим ар- 
гументированный ответ на вопрос, к каким из системных ресурсов можно 
предоставить доступ мобильному коду. 


7.1.1. Политика "сервера-источника" 


Как было сказано ранее, в среде У\еБ-браузера выполняется код, написанный 
неким "третьим лицом", зачастую неизвестным пользователю. Выполнение 
мобильного кода, копируемого по сети, представляет потенциальную опас- 
ность для локальной системы. Для того чтобы уменьшить эту опасность, про- 
изводители браузеров организуют запуск Јауа$Ѕсгірі-программ в специально 
сформированной среде, которая носит название "песочница" (запаБох). При 
этом программа имеет ограниченный доступ к ресурсам локальной системы 
либо не имеет его вовсе. Так, Ајах-приложение не может читать информацию 
из локальной файловой системы или записывать ее. Код Ајах-клиента также 
не может устанавливать сетевое соединение ни с одним сервером, за исключе- 
нием того, с которого он был скопирован. Элемент ГЕгате, сгенерированный 
в результате выполнения программы, позволяет получать документы с лю- 
бого узла и даже запускать их, но сценарии из различных фреймов не могут 
взаимодействовать друг с другом. Такой подход носит название политики 
"сервера-источника". 

Рассмотрим очень простой пример. Определим в сценарии некото- 
рую переменную. 

х=3; 

Во втором файле сценария попытаемся использовать ее. 

аІегі(їор.х+4); 

Первый сценарий включен в документ верхнего уровня. По его инициа- 
тиве был создан элемент ТЕгате и загружена страница, содержащая второй 
сценарий (рис. 7.1). 

Если оба сценария получены из одной области или из одного домена, 
функция а1егї () выполняется успешно. В противном случае при выполнении 
второго сценария возникает ошибка. 


7.1.2. Особенности выполнения сценариев в Ајах-приложении 


При взаимодействии, ориентированном на сценарии (см. главу 5), Јауа$сгірі- 
код копируется с сервера и непосредственно выполняется на стороне клиента. 
В большинстве случаев клиент получает код с того же сервера, с которого 
он был скопирован сам. однако возможны случаи получения программного 
кода из другого домена. При этом возникает так называемый кросс-сиенарий. 
Предоставляя право получать сценарии с произвольно выбранных узлов, мы 
тем самым формируем условия для возможной подмены документов или 
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И/ер-браузер 


% сое 


магх=З, аіең(1ор.х); 





Рис. 7.1. Модель безопасности Јамабсгірї запрещает 
сценариям, полученным из различных источников, 
взаимодействовать друг с другом 


их искажения путем манипуляции РОМ -информацией. Ограничения, преду- 
смотренные в модели безопасности ЈауаЅсгірі, обычно обеспечивают реаль- 
ную защиту от подобных явлений. Эта модель также предотвращает копиро- 
вание клиентского кода Ајах на узлы, контролируемые злоумышленниками, 
и подмену сервера. 

При взаимодействии, ориентированном на данные, риск значительно ни- 
же, так как вместо исполняемого кода сервер предоставляет лишь данные. 
Тем не менее информация на серверах злоумышленников может быть по- 
добрана так, чтобы нанести вред системе, используя известные недостатки 
в программах разбора. Таким образом, например, можно переопределить или 
удалить важную информацию или создать условия для неоправданно интен- 
сивного потребления ресурсов. 


7, 1.3. Проблемы с поддоменами 


Заметьте, что браузеры имеют весьма ограниченное представление о грани- 
цах конкретной области, или домена, и в ряде случаев, когда можно было 
бы обойтись предупреждением, генерируют ошибку. Браузер идентифициру- 
ет домен по первой части ОКІ и не делает попыток выяснить, указывают ли 
различные доменные имена на один и тот же [Р-адрес. В табл. 7.1 приведено 
несколько примеров решений, принимаемых моделью безопасности браузера. 

В случае поддоменов возможно выделить для сопоставления часть до- 
мена путем установки свойства 4оситеп(. їіотаіп. Так, например, мы мо- 
жем включить приведенную ниже строку в сценарий, полученный с узла 
һр: //м\у\.шувр. сот/аауе, 

доситепі.йотаіп^'туіѕр.сот'; 

Этим мы разрешим взаимодействие со сценарием, полученным из под- 
Домена ВИр://4ауе.ту1зр.сот/, при условии, что в нем также будет уста- 


новлено значение йоситепїі. аотаіп. Заметьте, что установить произвольное 
значение аоситепі.йотаіп, например \\\.200е.сот, невозможно. 
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Таблица 7.1. Примеры применения браузером политики безопасности 


ЦВЕ Разрешены ли 


кросс-сценарии 


Описание 








ВИр://му\. туз Ие.сот/ Да Сценарии получены из одного 

зсг1рЕ!.] $ домена 

БИр: //му\у\м. туз Це. сот/ 

‚СстЕрЕ2, 15$ 

Вр: Јум. ту ѕіёе .сот: 8080/ Нет Номера портов не совпадают 

ѕсгірї1.јѕ (первый сценарий получен 

һр: / Хммм. туз Це . сот/ посредством порта 8080) 

ѕсгірі2.јѕ 

Һігр://уу№.туѕіёе.сот/ Нет Протоколы не совпадают 

ѕсгірї1.јѕ (второй сценарий получен 

ВИр$://мм\у.тузЦе. сот/ посредством защищенного 

ѕсгірі2. јѕ протокола НТТР) 

БИр://му\м. туз Це. сот/ Нет Доменное имя 

ѕсгірї1.јѕ у\м.тузКе. сот 

ћр://192.168.0.1/ соответствует адресу 

ѕсгірі2.јѕ, 192.168.0.1, но браузер не 
проверяет этот факт 

Һр: //муу№. тузИе.сот/ Нет Поддомены считаются 

ѕсгірё1. ] $ различными доменами 

Бр: //зсг!р{$. муз Це. сош/ 

ѕсгірї2.јѕ 

һр: //му№.туіѕр.сот/ Да Несмотря на то что сценарии 

аӢауе/ѕсгірі1. јѕ получены с узлов, 

һер: //ум№.туіѕр, сот/ контролируемых различными 

егіс/ѕсгірі2. јѕ владельцами, домены 
считаются совпадающими 

һер: //мм№.туіѕр.сот/ Нет Имя уүү.туѕіѓе.сот 


аӢауе/ѕсгірі1. јѕ 
һірѕ: //№үүу. ту ѕіѓе . сот/ 
ѕсгірї2. ] $ 


указывает на 
уУ\.ту1зр. сот/4ауе, НО 
браузер не проверяет этот 
факт 


7.1.4. Несоответствие средств защиты 


в различных браузерах 


Наш разговор о безопасности нельзя считать завершенным без рассмотре- 
ния существенного расхождения в средствах защиты разных браузеров. Си- 
стема обеспечения безопасности Ицегпе ЕхрІогег оперирует с набором "зон 
безопасности" с ограниченными правами. По умолчанию исполняемые файлы 


из локальной файловой системы имеют право взаимодействовать с узлами из 
всемирной сети, не оповещая об этом пользователя (по крайней мере, такое 
поведение предусмотрено в Іпіегпеї ЕхрІогег 6). Таким образом, локальная 


часть 11 Создание профессиональных А/ах-приложений 


асте ирис 22 оо ООВ 
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файловая система считается безопасной зоной. При попытке выполнения того 
же кода, но полученного с локального Меб-сервера, отобразится диалоговое 
окно, показанное на рис. 7.2. 

В случае необходимости можно написать сложное Ајах-приложение и про- 
верять работоспособность больших фрагментов кода, оперируя данными из 
файловой системы. Временное исключение У№еБ-сервера из работы системы 
несколько упрощает создание кода. Однако мы настоятельно рекомендуем 
разработчикам наряду с отработкой взаимодействия на локальной файловой 
системе проверять его на реальном УБ-сервере. В браузере Мо7Ша понятие 
зон не используется. Приложение, загруженное из локальной системы, испы- 
тывает на себе те же ограничения, что и приложение, загруженное с МеБ- 
сервера. В Іһѓегпеї ЕхрІогег коды, полученные из различных зон безопасно- 
сти, будут вести себя по-разному. 

Итак, мы сформулировали основные ограничения, которые могут быть 
применены к сценариям в составе Ајах-приложений. Модель безопасности 
Јауа$сгірї в ряде случаев затрудняет работу, но в целом делает ее более на- 
дежной. Без нее доверие пользователей к службам Интернета и в том числе 
к средствам, предоставляемым Ајах, было бы столь низким, что их бы прак- 
тически никто не применял. 

В то же время бывает необходимо выполнять сценарии из доменов, отли- 
чающихся от того, из которого был получен сценарий. Такая необходимость 
возникает, например, при работе с рядом МеђЬ-служб. В следующем разделе 
вы увидите, как можно ослабить ограничения, связанные с защитой. 


7.2. Взаимодействие с удаленным сервером 


Средства защиты в составе браузера, конечно же, необходимы, но бывают 
ситуации, когда они лишь мешают нормальной работе. Чтобы система, обес- 
печивающая безопасность, работала эффективно, она обязана подвергать со- 
мнению правомочность каждого действия. Тем не менее в ряде случаев прило- 
жению бывает необходимо обратиться к стороннему серверу. Теперь, когда вы 
имеете представление о политике безопасности браузера, давайте подумаем 
о том, как ослабить налагаемые ограничения. Мы рассмотрим два возможных 
решения этой задачи. Одно из них предполагает наличие дополнительного ко- 
да на стороне сервера, а второе затрагивает только клиентскую программу. 
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Рис. 7.3. Если А]ах-приложению необходимо получить доступ к ресурсам 
из другого домена, "сервер-источник" выступает а роли посредника, или 
прокси-сервера 


7.2.1. Сервер в роли посредника при обращении 
к удаленной службе 


В соответствии с политикой "сервера-источника" Ајах-приложение может ко- 
пировать данные лишь из своего собственного домена. Если нам надо полу- 
чать информацию с другого сервера, можно организовать обращение к нему 
не с клиентской машины, а с "сервера-источника", а ответ перенаправить кли- 
енту (рис. 7.3). 

В этом случае с точки зрения браузера данные поступают с того серве- 
ра, с которого загружена клиентская программа, что не противоречит поли- 
тике "сервера-источника". Кроме того, перед перенаправлением информации 
клиенту на сервере может быть выполнена проверка на наличие недопусти- 
мых данных. 

Недостатком такого подхода является увеличение нагрузки на сервер. Ре- 
шение, которое мы рассмотрим ниже, предполагает обращение браузера непо- 
средственно к требуемому серверу 


7.2.2. Взаимодействие с И/еБ-службами 


В настоящее время многие организации предоставляют У\еБ-службы, котД 
рые могут быть использованы различными программами, включая Јауа$сгірї, 
клиентов. При работе клиента Ајах желательно иметь возможность непо- 

средственно обращаться к У -службе. Помехой этому является политика 

"сервера-источника". Решить данную проблему можно, запрашивая из про- 

граммы привилегии, необходимые для выполнения требуемых действий в се- 

ти. Запрос на получение привилегий отображается на экране, чтобы поль- 

зователь подтвердил его правомочность. Браузер может запомнить решение 

пользователя и в дальнейшем оно будет приниматься автоматически. 

В данном разделе мы рассмотрим обращение клиента Ајах к произвольно 
выбранной М№еБ-службе. Браузеры Пиегпе{ Ехр]огег и МохШа ЕтеЮх обраба- 
тывают запрос на получение привилегий по-разному, поэтому нам необходимо 
найти способы, позволяющие работать с ними обоими. 

Программа, рассматриваемая в качестве примера, устанавливает взаимо- 
действие с одной из \еБ-служб Соозе, используя для этой цели ЗОАР (Ѕіт- 
ре Објесі Ассеѕѕ Ргоѓосо]). Протокол 5ОАР базируется на НТТР. В составе 
запроса серверу передается ХМГ-документ, содержащий значения парамет- 
ров, а ответом сервера является ХМГ-документ, описывающий результаты. 
ХМГ-документ, пересылаемый по протоколу ЅОАР, имеет достаточно про- 
стую структуру и состоит из заголовков и содержимого, помещенных в свое- 
образный "конверт". Использование формата ХМГ, упрощает применение объ- 
екта ХМ НИрКедие для работы с данным протоколом. 

Для работы со своей поисковой машиной Соое предоставляет интерфейс 
ЗОАР. Пользователь может передавать ключевые слова в составе запроса 
и получать в ответ ХМГ-документ, содержащий результаты. Ответ в форма- 
те ХМГ очень похож на данные, отображаемые Соое на странице поиска. 
Каждый пункт набора результатов содержит заголовок, фрагмент текста, 
описание и ОВГ. В ответе также указывается приблизительное число доку- 
ментов, удовлетворяющих условиям поиска. 

Наше приложение представляет собой своеобразную игру с применением 
Интернета. В ней будет использоваться информация о количестве докумен- 
тов, полученных в результате поиска. Пользователю предлагается простая 
форма и случайным образом сгенерированное большое число (рис. 7.4). Зада- 
ча пользователя — задать ключевые слова, при обработке которых сервером 
Соовје будет получено количество результатов, отличающихся от заданного 
числа не более, чем на 1000. 

Мы будем взаимодействовать с ЗОАР-службой СоовІе посредством ХМ: 
НИрВеачез+{ в составе объекта СопіепіГ оайег (его мы разработали в главе 3). 
Последний раз мы обращались к данному объекту в главе 6, где оснастили его 
некоторыми новыми возможностями. Если мы используем последнюю версию 
Сошеп .оа4ег для взаимодействия с Соозе, то получим желаемые резуль- 
гаты при работе с браузером Іпїегпеї ЕхрІогег, но не с Моа. Рассмотрим 
вкратце особенности поведения каждого браузера. 
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Рис. 7.4. Использование АР! ЗОАР, предоставляемого Сооде, в простом Ајах-приложении, 
Пользователь вводит ключевые слова для поиска. Число результатов, предоставляемых 
Сооде, должно укладываться в заранее заданный диапазон значений 


Браузер \{егпе{ Ехр!огег и №Мер-службы 


Как было сказано ранее, система защиты Іпіегпеі ЕхрІогег базируется на по- 
нятии зон безопасности. Если мы скопируем наше приложение с У№еБ-сервера, 
даже локального, оно будет рассматриваться как представляющее опасность 
для системы. Когда мы в первый раз обратимся к Соое, используя Соп- 
{еп .оа4ег, то получим сообщение, подобное тому, которое было представ- 
лено на рис. 7.2. Если пользователь щелкнет на кнопке Үеѕ, передача данного 
запроса, а также всех последующих запросов к тому же серверу будет раз- 
решена. Если пользователь щелкнет на кнопке №, запрос будет отвергнут 
и управление получит обработчик ошибок Сощеп Иоадег. В данном случае 
обеспечивается средний уровень защиты, а пользователь испытывает неболь- 
шие неудобства в работе. 

Как вы помните, при запуске Ајах-клиента из локальной файловой си- 
стемы браузер Пиегпе{ Ехр]огег рассматривает эту среду как безопасную, 
и диалоговое окно не отображается. 

Браузеры Мо7Ша, в том числе Еігеѓох, используют более строгий подход 
к обеспечению защиты, и получить требуемые права сложнее. 


Мо7!а Римедемападег 


Модель защиты браузера МохШа основана на понятии привилегий. Счита- 
ется, что каждое действие, независимо от того, является ли оно обраще- 
нием к стороннему У№еБ-серверу или чтением файлов из локальной файло- 
вой системы, может представлять опасность для системы. Чтобы выполнить 
действие, код приложения должен запросить соответствующие привилегии. 
Привилегиями управляет объект пеіѕсаре.ѕесигіїіу.РгіуіеѕеМапавег. Ес- 
ли мы хотим, чтобы клиентская программа Ајах взаимодействовала с серве- 
ром Соо?е, нам надо сначала организовать обращение к РиуНезеМапазег. 
Епеюх может быть настроен так, что РиуПезеМапазег даже не будет при- 
нимать обращения, причем для данных, обслуживаемых сервером, подобные 
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Рис. 7.5. Если приложение запрашивает у браузера Еігеїох дополнительные привилегии, на 
экране отображается окно с предупреждающим сообщением 


установки принимаются по умолчанию. Таким образом, подход, рассматри- 
ваемый в данном разделе, в основном подходит для использования в сетях 
іпігапеї. Поэтому последующий материал ориентирован в основном на разра- 
ботчиков, которые создают программное обеспечение для внутренних сетей 
предприятия, а также на тех, кого интересуют особенности работы ЕитеЮх. 

Запросить привилегии позволяет метод епа ]еРи!уезе. При обращении 
к нему выполнение сценария приостанавливается и на экране отображается 
диалоговое окно, показанное на рис. 7.5. 

В окне выводится предупреждение о том, что сценарий собирается вы- 
полнить действие, которое потенциально может быть опасным. Пользователь 
может разрешить или запретить предоставление привилегий. В любом слу- 
чае выполнение сценария возобновляется. Если привилегии получены, про- 
грамма может выполнить требуемые действия. В противном случае она лишь 
пытается предпринять их, но в результате возникает ошибка. 

Как вы уже знаете, Іпіегпеї ЕхрІогег запоминает первое решение поль- 
зователя и, единожды отобразив предупреждающее сообщение, больше не 
повторяет его. Браузер Мо7Ша предоставляет привилегии только на время 
действия запросившей их функции, и, если пользователь не установит фла- 
жок опции Кететбег ту Яесіѕіоп, действия программы будут прерываться 
каждый раз, когда ей потребуются привилегии. {Как вы увидите, это может 
произойти дважды в течение одного запроса по сети.) Очевидно, что в данном 
случае требования безопасности и применимости противоречат друг другу. 

Вернемся к объекту Сомеп .оа4ег (мы уже обсуждали его в главах 3, 
5 и 6). Постараемся ответить на вопрос, что надо сделать, чтобы передать 
запрос серверу Соое. В модифицированном коде предусмотрены запросы 
к объекту РгіуПевеМапарег (листинг 7.1). Мы также реализовали возмож- 
ность формирования произвольных НТТР-заголовков. Это необходимо для 
создания сообщений ЅОАР. 
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Листинг7.1. Сопіепіі оааег, взаимодействующий со средствами защиты 


пе .СопіепіІоайег= Ғџипсііоп ( 

џг1,оп1оаа, опеггог, теёһоа, рагатюѕ, 'сопбепЕТуре, 
Һеайегз,ѕзесиге 
){ 

Е51$.кеа=па11; 

(51$ .оп1оаЯ=оп1оаа; 

Ер1$ , опегког= (опегкох) ? опеггог 

еҺіѕ.деҒаџ1ЕЕггог; 

Е51$.зесаге=зесиге; 
еҺіѕ.1оаахмірос (иг1,меево@, рагатѕ, сопіепёТуре, Һеайегѕ); 








ий 





пе .СопёепіІоайег.ргоіоёуре= { 
1оаахмірос: Ёопсііор (ик1 ‚ меіћоа, рахамз , сопёсепіё Туре, Һеайегѕ) { 
1Е (!тмеёһоа) { 
пеёћоа= "СЕТ"; 





} 
1Е {!сопіепіТуре && шеіһоа=="РОЅТ") { 
сопёепёТуре^'арр1ісаёбіоп/х-ути- Ёоіт-иг1епсодед’; 
} 
1Е (млроаом.хХМЬНЕерВеоаоез5) { 
(61$ .геа=пем ХМІНіёрВедиоезі (); 
} е1ѕе 1Е (ухіпаоу.Асііуехорјесё) { 
(61$ .геа=пем АсёіуехоОрјесі ("МісгоѕоЁі .ХМІНТТР"); 





} 
1Е (ЕЪ15.геа) { 
Егу{ 
Еху{ 
1Е (6Е518.взесиге && пеізсаре 
&6 пеіѕсаре.ѕесигііу,Ргіуі1есдеМапасдег.епар1іергіуі1есде) { 
// О Получение привилегий для передачи запроса 
пеёѕсаре. зесогіёу.Ргіуі1есдеМападег 
.епар1ергіуі1еде ('Опіуегза1ВгоизегВеай'); 


} 
}саєсЬ (егг) 0 
ЕһҺіѕ.геа.орепр (теёһоа, игі, ёгие) ; 
1Е (сопбепЕТуре) { 

Е515$.геа. зе ВесоезЕНеааех ('Сопёепё-Туре', сопеепЕТуре); 
} 

// @ Добавление поля заголовка НТТР 

1Е (Ъеааегз){ 

Еог (уаг В іп Беааегз) { 

Е515.геа.зеевВеачезеНеааег (Һ,Һеайегѕ[Һ] ) ; 





} 

} 

уаг 1оайег=һіз; 

ЕҺіѕ.геа. опреадуѕёаёесһапде= Ёоџпсёіоп () { 
1оадег.опКеадуѕіаёе.са11 (1оадег) ; 

} 

еһіѕ.геа. ѕзепа (рагатѕ); 

}саєсһ (ег) { 
Еһіѕ.опеггог.са11(ёһіѕ); 


І 
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опВКеадуѕіаіе: Ёипсіёіоп () { 
уаг геа=Еһіѕ.гед; 
уаг геаау=геа.геа дубе аке; 
і Е (кеаду==пеё .ВЕАрү ТАТЕ СОМРІЕТЕ) { 
уар ҺЕёрЅіаіоѕ=геа. ѕіёаёиѕ; 
1Е (ҺесрЅёсаёиѕ==200 ТТ Һіірбіаёиѕ==0) { 
Суу { 
1Е (Еһіѕ.ѕесиге && пеіѕсар 
&& песѕсаре.ѕесигііу.Ргіуі1едеМапасдег.епар1еРгіуі1еде) { 
// Получение привилегий для раэбора ответа 
песѕсаре . ѕесигііу.Ргіуі1есдемМападег 
пар1ергіуі1еде ('Оп1уегза1ВгомзехВеаа`); 
} 
}саїсҺ (егг){} 
{61$.оп[оа4.са11 (101$) 
}е15е{ 
{61$. опеггог. са11(161$); 
} 


} 





т 





























Ь 
деғаціЕтггог:Ғопсііоп()ї 
аІегі("еггог ҒЁеісһіпе ааїѓа!" 
+"\п\пгеаау$ѓаѓе:"+1һіѕ.гед.геайуЅіаѓе 
+"\пѕіаиѕ: "+(һ1ѕ.гед.ѕіаїиѕ 
+"\аһеааегѕ: "+#һ1ѕ.гед.реіАНКеѕропѕеНеааегѕ()); 
Ј 





К конструктору добавлены дополнительные параметры. Первый пара- 
метр представляет собой массив полей заголовка НТТР 0. Эти поля нам 
придется использовать при формировании запроса ЗОАР. Второй дополни- 
тельный параметр — логическое значение, выполняющее роль флага, кото- 
рый показывает, следует ли запрашивать привилегии на определенных этапах 
выполнения программы. 

Когда мы запрашиваем привилегии, обращаясь к объекту пеіѕсаре. 
РиуПезеМапагег, мы получаем их лишь на время выполнения текущей 
функции. Следовательно, нам надо запрашивать привилегии дважды: для об- 
ращения к удаленному серверу О и для чтения полученного ответа @. Функ- 
цию обработчика оп1оа4 мы вызываем в области видимости функции оп- 
Кеаау$їаѓе (), поэтому полученные привилегии будут действовать и для нее. 

Браузер Пиегпе{ ЕхрІогег не поддерживает РгіуПеве Мапазег, и при об- 
ращении к данному объекту будет сгенерировано исключение. Поэтому мы 
помещаем обращения в блок {ту.. .саїсһ, в результате чего исключение бу- 
дет перехвачено и должным образом обработано. Если приведенный выше 
код будет выполнен в среде Іпіегпеї ЕхріІогег, в блоке їгу.. . саісһ возникнет 
ошибка и программа не будет завершена аварийно. Под управлением браузе- 
ра Мо7Ша работа с РгіуПереМапавег не вызовет исключения. 

Воспользуемся модифицированным объектом Соп(еп .оа4ет для переда- 
чи запроса Соое. В листинге 7.2 приведен НТМГ-код, обеспечивающий ра- 
боту приложения. 
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Листинг 7.2. Содержимое файла доод1Іебоар.һті1 


<1рОСТҮРЕ НТМ РОВЬТС "-//МЗС//РТЬ НТМ 4.0 Тгапѕіёіопа1/ /ЕМ№"> 
<ћітм1> 
<Беаа> 
<Е161е>Соод1е биеѕѕіпа</ёіЄ1е> 
<ѕсгірі буре="сехе/)ауазск1ре" зѕгс='пеё_ѕесиге.јѕ'></ѕсрірё> 
<ѕсгірі ёуре= "ёехі/јауаѕскірі" ѕгс='доод1Іебоар.јѕ'Х/ѕсгіріё> 
<ѕсгірі буре= 'сехё/јауаѕсгірё'> 
уаг сдоод1екеу=пи11; 














уаг сиоеѕѕКапде = 1000; 
уаг іпЕМит = Маһ. копа (маёһ. гапдот () 
* Маёһ. роу (10, Маёһ. гоџпа (Маһ. капаотм() *8))); 
тіпаоу.оп1оаа = Ёоцпсёіоп() { 
аосимепе .чееЕ1етептЕВуТаА (" ѕзрапмМотрег") 
.іплегнНтмі_ = іпЕМоим + " апа " 


+ (іпЕМит + соеѕѕВапде); 


} 


</ѕсгірё> 
</Һеаа»> 
<Боау> 
<Еогм папе="Еоги1" опѕ\іртіё=" ѕирпієбицеѕѕо; геёигп Ға1ѕе; "> 
Орёбаіп а ѕеагсһ ёһаі гебигпѕ реібумееп&прѕр; 
<ѕрап іа= "ѕрап\опрег"></ ѕзрап>&прѕр; геѕи1ёѕ!<рк/> 
<іприё буре="ёехё" пате= "уоџгбиеѕѕ" уа]1ае="Адзах"> 
<іпроі суре="зиби1е" пате= "Ь1" уа1ае="Саезз" /><Бк/хЬк/> 
<зрап іа="ѕрапКеѕиіёѕ "></ѕрап> 
</Рогт> 
<һг/> 
<{ех(агеа го\м5='24‘ со15='100' іа='аеѓаі15 'Х/(ехіагеа> 
</Боау> 
</вт1> 


В состав НТМГ-файла мы включаем элементы формы и код для вычис- 
ления достаточно большого псевдослучайного числа. Мы также объявляем 
переменную 200#]еКеу. Это ключ, позволяющий использовать АРІ Соое 
ЗОАР. Мы не приводим здесь реального ключа, так как это противоречило 
бы лицензионным соглашениям. Ключи предоставляются бесплатно и дают 
возможность выполнять в течение дня ограниченное число операций поиска. 
Процедура получения ключа достаточно проста. Для этого надо обратиться 
по ОКГ, приведенному в конце данной главы. 


Передача запроса 


Основная часть работы выполняется функцией зибтИСтез$ (), которая вы- 
зывается при активизации кнопки затй. Эта функция определена во вклю- 
чаемом ЈауаЅсгірі-файле. ЈауаЅсгірі-код этой функции, осуществляющий об- 
ращение к АРІ Соозе, приведен в листинге 7.3. 
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Листинг 7.3. Функция зи бт иез$(} 
ГапсНоп зибтИОие$з$(){ 
// О Проверка ключа лицензирования 

і? (івооР1еКеу){ 

аІегі("Уоо №111 пееа їо реї а 11сепзе Кеу 

+"гот Соозе,\п апа іпѕегі і 1010" 
"(Ве ѕсгірі ќар іп (һе Вт! Ё 1е\п" 
+"БеГоге 101$ ехатріе №і11 гип."); 
геїогп поі; 


} 


уаг пуСцеѕѕ=досипепі .Еоги1 .уоцгСиез$$ .уа1ае; 





// © Создание сообщения ЅОАР 
уаг ѕігбоар='<?хті уегз1о0оп="1.0" епсоа1па="ОТЕ-8"?>' 

+ ' \п\п<бОАР-ЕМУ : Епуе1Торе' 
+ ' хт1пѕ: ЅОАР-ЕМУ= "Һр: / /зстемаз .хи1зоар.ога/зоар/епуе1оре/" ' 
+' хтіпѕ:хѕі= "Һр: / /мммм.м3 .ога/1999/хМГ5срета-1пзбапсе" ' 
+ ' хи10$ :хѕа= "Һер: / /ултт. м3 .0оха/1999/хмЬ$свегпа">' 
+ ' <СОАР-ЕМУ: Воау Хи $ 1 : аобСооч1ебеакст' 
+' хт1пѕ:пѕ1= "игп:Соод1іеЗеагсћһ"! 
+' СОАР-ЕМУ: епсоЧ1юа5еу1е=' 
+ "ҺЕЕр: //ѕсһетаѕ .хи1зоар.охга/зоар/епсоЯ1та/">' 
+'<Кеу хѕі:іуре= "хѕа:ѕігіпд">' + доод1еКеу + '</Кеу>' 
+'<а хѕі :Еуре= "хѕа: ѕігіпа" > ' +тубиеѕѕ+' </а>' 
+'<ѕіагі хѕі : іуре= "хѕа:іпё">О</ѕбагі>' 
+'<пахВеѕи1ёѕ хѕі:буре= "хѕа: іп ">1</пахВКеѕи1ёѕ>' 
+'<Еі16сег хѕі :ёуре= "хѕа: роо1еап" >ігие</ Ё116ек>' 
+ '<геѕігісі хѕі : іуре= "хѕа: ѕігіпа" Х/геѕігісі> ' 
+'<ѕаҒебеагсһ хѕі : суре="хза : роо1еап">Ға1ѕе</ ѕаҒебеагсһ>' 
+'<1р хѕі:іуре= "хѕа: ѕегіпа"></1ү>' 
+'<1е хѕі:іуре= "хѕа: ѕігіпо">1аёбіп1</іе>'! 
+'<ое хі: Еуре= "хѕа: ѕігіпо" >1аёіп1</оех'! 
+. </051 : аобоод1іедеагсћһ»> ' 
+ '</ЗОАР-ЕМУ : Воду ' 
+ '</ЗОАР-ЕМУ: Епуе1оре>'; 



































// 0 Создание СопёепіІоайег, в том числе 
// предоставление ОВГ Соод1е АРТ и 
// передача дополнительных полей заголовка 
уаг Іоайег=пеу пеб.СопеепЕГоааек ( 
"ҺЕёр:/ /арі .сдоод1е.сот/ ѕеагсһ/реёа2", 
рагѕебоос1еКеѕропѕе, 
соос1еЕггогНапа1ех, 
"РОТ", 
ѕігбоар, 
"Еехі/хті", 
{ 
Мап:"РОЅТ Һр: //арі .доод1е.сот/ ѕзеагсһ/реса2 НТТР/1,1", 
МеѕѕасеТуре: "САШ" 
у; 
сгие 
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Выполнение функции ѕибртіїСоиеѕѕ () начинается с проверки наличия 
ключа лицензирования. Если ключ отсутствует, программа напоминает об 
‚том пользователю О. Если вы скопируете код данного примера, значение 
ключа лицензирования будет установлено равным пи, поэтому вам надо 
получить с сервера Соое реальный ключ. 

Следующая задача — создать ЗОАР-сообщение © большого объема, со- 
держащее ключевые слова поиска и ключ лицензирования. Разработчики 
ЅОАР предполагали, что все основные действия будут автоматизированы, 
поэтому, создавая ХМТ-файл вручную, мы отступаем от основных принци- 
пов работы со службами. Браузеры Пиегпей ЕхрМогег и Мо7Ша предостав- 
ляют объекты, упрошающие взаимодействие посредством ЗОАР. Однако на 
наш взгляд, будет полезно хотя бы раз вручную сформировать ЗОАР-запрос 
и разобрать ответ. 


Имея готовый ХМГ-текст, мы создаем объект Сопѓіепіоайег ©, при этом 
задаем ЗОАР ХМЕГ в качестве содержимого НТТР-запроса, а также указы- 
ваем ОКІ АРІ Соое и поля НТТР-заголовка. В качестве типа содержимо- 
го указывается значение {ех(/хи11. Заметьте, что МІМЕ-тип определяет тип 
данных в теле сообщения, а не тип информации, которую мы ожидаем полу- 
чить в ответе (в данном случае эти типы совпадают). Последний параметр — 
значение {гие, которое указывает на то, что мы должны запрашивать необ- 
ходимые права с помощью объекта РиуЦезеМапаеег. 


Разбор ответа 


Объект Сомеп оа4ег создает запрос, в ответ на который (с согласия поль- 
зователя) будет получен большой объем ХМГ-данных. Ниже приведен фраг- 
мент ответа, представляющего собой результаты поиска по ключевому сло- 
ву Ајах. 


<?хпІ уекѕіоп='1.0' епсоа1па='аЕЕ-8'?> 
<ѕзоар-епу:епуе1оре 
хпіпѕ : ѕзоар-епу= "Һіір: / / ѕсһепмаѕ. хт1 ѕоар.огод/ ѕоар/епуе1оре/" 
хп1пѕ:хѕі= "ҺёЕбр: / /ммм.м3 . 0019/1999 /хтм1ѕсһета-іпѕёапсе" 
хт1пѕ:хѕа= "ҺіЄр: / /ултт.13 . 0159/1999 /хміѕсһепа"> 
<зоар-епу:Боау> 
<п51: аӢосдоод1Іеѕеагсһгеѕропѕ хт1пѕ:пѕ1-~ "игп:доод1Іеѕеагсћһ" 
зоар-епу:епсодіпазіу1е= "Пір: / /ѕсһепаѕ.хтмі зоар.ого/ ѕоар/епсоаіпд/"; 
<геіцүп хѕі:іуре= "пѕ1:доод1еѕеагсһгеѕи1ё"> 
<аігесіогусаёседогіезѕ 
хміпѕ : п52= "Һр: //ѕсһетаѕ. хм1 ѕоар.огаод/ ѕоар/епсоаіпда/" 
хѕі:Еуре= "п52:аггау" 
152 :аггауіуре= "пѕ1:а1гесіогусаіёедогу [1] "> 





<еѕёітаёсеіѕехасі хѕі:іуре= "хѕа: роо1еап">Ға1ѕе</еѕііпаёеіѕехасё> 
<еѕзііпаёсеаёсоёа1 геѕи1ёзсоопі 
хѕі:буре= "хѕа: іпі">741000</еѕіітмаседёсоёа1 геѕо1ёѕсоцпі> 





<Һоѕіпатме хѕі : ёуре= "хѕа: ѕёгіпа" >< /Һоѕіпапе> 

<ге1аёсеаіпҒогтаёіопргеѕепі хѕі : ёуре= "хѕа: роо1еап">ёгие 
</ ге1аёеаіпҒогтаііопргеѕепі> 

<ѕпірреё хѕі:ёуре= "хѕа:ѕігіпд">Ӣе оЁҒісіпІе з16е уап аїс 
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& И; & Е; ал ах& М; /6& Е; . < /ѕпірреї> 
<ѕиттагу хѕі:іуре="хѕа:ѕ1гіпе" > о#ѓісіа1ї саб зе, 
іпсІџаіпе гоѕіег, һіѕіогу, У\УаПрарег$, апа Уіайео сі1ірѕ. 
& И; тг; [епе1іѕһ/аиѓсһ | < /ѕиттагу> 
< е хѕі:їуре="хѕа:ѕїгіпе" > 
&16; 6 &рі;ајах& 11; /6&2Е;.п1 - ѕрІаѕһравіпа 
</ие> 


Реальный ЗОАР-ответ содержит гораздо больший объем информации. 
В первой части ответа определены некоторые заголовки, имеющие отноше- 
ние к доставке данных, в частности, там указан источник, из которого посту- 
пил ответ. В теле документа присутствуют элементы, описывающие объем 
набора результатов. В данном случае количество результатов приблизитель- 
но оценено как 741000. Также мы видим часть первого результата поиска — 
ссылку на страницу голландского футбольного клуба. В листинге 7.4 по- 
казан обработчик обратного вызова, с помощью которого мы осуществляем 
разбор результатов. 


Листинг 7.4. Функция рагзеСоо?1еКезропзе () м $ 
РапсНоп рагзеСооеВезропзе(){ 

уаг аӢос=1һіѕ.гед.геѕропѕеТехі.іоГомегСазѕе() ; 
аоситепі.оеіЕІетепіВу!а( 'Яеѓаі15').уаіпе=аос; 
уаг ѕѓагіТас = '<еѕіітаѓейїѓоѓаІгеѕиіѕсоипі хѕі:їуре="хѕа:іпі">'; 
уаг епаТае='< /еѕіітаќѓедіоѓаІгеѕиіїѕсоипі>'; 
уаг ѕро1=аос.іпаехО#(ѕіагіТае); 
уаг 5роїі2=аӣос.іпаехОєепатае); 
уаг ѕігТоѓаП^аос.ѕибѕігіпо (ѕ5рої1 +ѕїагіТае.Іепвіћ,ѕроії2); 
уаг ѓоѓаП =рагѕе1пі(ѕїігТоїац); 
уаг ѕігОџ^""; 
1Е (боба11>«іпіМитм && Гбоба11<=іпЕМит+сцеѕѕВКапде) { 

ѕікОоЕ+= "Үоци сиоеѕѕеа гідһё!"; 
}е1зе{ 

$ЕхОцЕ+="ИВОМС! Тхгу адалш!"; 
} 
зЕхОиЕ+="<рг/>Уоцг ѕеагсһ ог <зегопа>" 

+аӢосотепі .Еогш1 .уоциСаез $.уа1ае 
+"</ѕегопа> гебогкрея " + ѕёгтТоба11 + " геѕи1ёѕ!"; 

Чосомепе . че Е1етепеВу1аЕ" ѕрапвеѕиіёѕ") .1ппе’НТМЬ = $ЕкОйЕ; 


у Е 








В данном случае нас интересует не структура ЅОАР-сообщения, а лишь 
предполагаемое количество результатов. Ответ представляет собой коррект- 
ный ХМІ-документ, и мы могли бы использовать для его разбора свойство 
геѕропѕеЕХМІ, объекта ХМЕНИрВеачцез. Однако мы пойдем по пути наимень- 
шего сопротивления и извлечем число результатов путем преобразования 
строки. Затем, выполняя операции со структурой РОМ, мы сообщим поль- 
зователю о том, насколько удачно он подобрал ключевые слова. Для тех, 
кто хочет более подробно разобраться с данными ЗОАР, мы выведем весь 
ХМГ-ответ в текстовой области. 
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Обеспечение доступа к РгімііедеМападег в Еігеѓох 


Как было сказано ранее, РиуПезеМапагег может быть сконфигуриро- 
„.Н Так, что он не будет реагировать на запросы из программы. Для 
‚ого чтобы выяснить, выполнены ли в браузере Еігеҝох подобные уста- 
новки, надо ввести в строке, предназначенной для указания адреса, 
аброи :сопћіе. В ответ будет выведена информация о текущей настройке. 
Используя поле редактирования, выполняющее фильтрацию, найдем пункт 
ѕівпеа.арр1еїѕ.соаеђаѕе _рг!пс1ра|_зирроге. Если значение данного свой- 
ства равно (гие, рассмотренный ранее код будет работать. В противном слу- 
чае нам не удастся организовать взаимодействие с Сооз|е. 


В ранних версиях Мо7Ша установки должны были выполняться вручную, 
после чего необходимо было перезапустить браузер. В Егеѓох, дважды щелк- 
нув на соответствующей строке списка установок, можно заменить значение 
{гие на Ёа1ѕе и обратно. Изменения, вносимые таким образом, вступают 
в действие немедленно; при этом не только не требуется перезапускать бра- 
узер, но, если параметры отображаются на отдельной вкладке, не надо даже 
обновлять страницу. 


Подписание клиентского кода для выполнения в среде Мо7Ша 


Поскольку Іпѓегпеі ЕхрІогег не использует РгіуЏевеМапавег, многократного 
подтверждать правомочность действий программы не приходится. В среде 
Мо7Ша дважды отображается диалоговое окно, что создает определенные 
неудобства для пользователя (конечно, окно выводится только в случае, ес- 
ли конфигурация браузера позволяет использовать Ргіуіеве Мапарег). По- 
вторного отображения диалогового окна можно избежать, установив флажок 
опции Кететбег ту Чес1$1оп (рис. 7.5), но мы, как разработчики, лишены 
возможности сделать это из программы. 

Существует решение этой проблемы, но оно предполагает специальное 
оформление приложения. \Уе5-приложение может быть подписано с помо- 
шью сертификата. Чтобы сделать это, нам надо представить приложение 
браузеру в виде ЈАК-файла — сжатого архива, содержащего все сценарии, 
НТМЕ-страницы, изображения и другие ресурсы. Подготовленный ЈАК-файл 
можно подписать, используя сертификат, полученный у Тважще, Уеп$!еп или 
Другой компании, занимающейся подобной деятельностью. Для обращения 
к ресурсам, содержащимся в подписанном ЈАК-файле. используются специ- 
альные выражения, подобные представленному ниже. 


јаг:Һр://туѕегуег/ ту 1епеТаг.даг/раВ/4о/зоте\Уе Разе. Вит 


Когда пользователь копирует подписанное У\еБ-приложение, он должен 
Лишь один раз подтвердить предоставление привилегий: повторно ему подоб- 
ные вопросы не задаются. 

Браузер Мо7Ша предоставляет бесплатные инструментальные средства 
Для подписания ЛАК-файлов. Те пользователи, которые собираются лишь 
поэкспериментировать с данной технологией, могут сгенерировать неаутен- 
Тифицируемые сертификаты. Для этой цели предназначена утилита Кеу{оо1, 
поставляемая в составе Јауа Оеуе]ортеп Ки (ОК). Мы же рекомендуем 
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обзавестись настоящим сертификатом, который можно будет использовать 
в практических целях. 

Подписанные ГАК-файлы не являются переносимыми и могут работать 
только с браузерами Мо7Ша. По этой причине мы не будем подробно рас- 
сматривать процедуру подписания кода. Те, кого интересует данный вопрос 
могут воспользоваться информацией из источников, ссылки на которые при- 
ведены в конце данной главы. 

На этом мы завершаем обсуждение вопросов взаимодействия приложений 
Ајах с удаленными службами. Мы выяснили, как приложение, выполняюще- 
еся в среде браузера, может обмениваться данными с сервером, с которо- 
го оно было скопировано, а при необходимости и со сторонними серверами. 
Программы, полученные с сервера, вряд ли смогут повредить вашей систе- 
ме. Однако остается еще одна опасность, связанная с обменом информацией, 
особенно конфиденциальной. В следующем разделе мы поговорим о том, как 
скрыть данные пользователя от постороннего взгляда. 


7.3. Защита конфиденциальной информации 


Компьютер пользователя, на котором работает браузер, как правило, не 
имеет непосредственного соединения с сервером. Данные, передаваемые на 
сервер, проходят через промежуточные узлы (маршрутизаторы и прокси- 
серверы). Обычные НТТР-данные представляют собой незашифрованный 
текст, который можно прочитать в любой точке по пути следования паке- 
та. Таким образом, информация может стать доступна любому, кто имеет 
контроль над промежуточными узлами. 


7.3.1. Вмешательство в процесс передачи данных 


Предположим, что вы написали приложение Адах, которое передает по Ин- 
тернету финансовую информацию, например, сведения о банковских счетах 
или номера платежных карточек. Если маршрутизатор работает корректно, 
он передает пакеты в неизменном виде и не читает их содержимое. Он лишь 
извлекает из заголовков данные, необходимые для выбора маршрута. Если 
же маршрутизатор контролируется злоумышленниками (рис. 7.6), он может 
собирать содержащиеся в пакетах сведения, выявляя, например, номера пла- 
тежных карточек или почтовые адреса для рассылки сиама. Он даже может 
изменять маршрут так, чтобы пакет попал на другой сервер, или модифи- 
цировать передаваемые данные (чтобы, например, положить деньги на дру- 
гой счет). 


В Ајах-приложениях протокол НТТР используется как для копирования 
клиентского кода, так и для передачи запросов клиента серверу. Все способы 
взаимодействия, которые мы рассматривали до сих пор. — скрытые элементы 
1Етате, НТМТ-формы, объекты ХМЕНИрКедиез{ — с этой точки зрения оди- 
наковы. Любое МеЬ-приложение, в том числе и инфраструктура Ајах, име- 
ет ряд уязвимых мест, которыми могут воспользоваться злоумышленники. 
Атака путем перехвата передаваемых данных на промежуточном узле носит 
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Међ-браузер 


Сервер) 


Пароль 





Всемирная сеть 


Рис. 7.6. При обычном НТТР-взаимодействии данные 
передаются по глобальной сети в виде незашифрованного 
текста, что позволяет злоумышленникам, контролирующим 
промежуточные узлы, прочитать информацию и даже 
изменить ее 


название "человек посередине". Рассмотрим меры, которые можно принять 
для противодействия подобным атакам. 


7.3.2. Организация защищенного НТТР-взаимодействия 


Если вам необходимо защитить трафик между клиентской программой Ајах 
и сервером, самая очевидная мера, которую вы можете предпринять, — ко- 
дировать данные, используя защищенное соединение. НурецехЕ ТгапзЕет Рго- 
{осо| на базе Зесиге Ѕоскеї Гауег (НТТР$) реализует оболочку для обычного 
НТТР. Кодирование данных, передаваемых в обоих направлениях, осуществ- 
ляется посредством пары ключей (открытого и закрытого). "Человеку посе- 
редине" по-прежнему доступно содержимое пакетов, но оно закодировано, 
и извлечь выгоду из данной информации невозможно (рис. 7.7). 


Для того чтобы протокол НТТРЅ можно было применить на сто- 
роне браузера и на стороне сервера, необходима поддержка платформенно- 
ориентированного кода. Современные браузеры содержат встроенные сред- 
ства для работы с НТТР, и многие компании, предоставляющие на своих 
серверах пространство для М№еђ-узлов, также предлагают защищенные соеди- 
нения. При поддержке протокола НТТР5 выполняются интенсивные вычис- 
ления, поэтому решение формировать передаваемые двоичные данные в про- 
грамме на ЈауаЅсгірё вряд ли можно считать удачным. Мы не ставим задачу 
повторно реализовать с помощью ЈауаЅсгірі РОМ, С$5 или НТТР, поэтому 


290 Часть 1. Создание профессиональных Ајах-приложений 


\е5-браузер 







Пароль 










Рис. 7.7. При использовании 


защищенного НТТР-соединения 


Маршрутизатор данные, передаваемые в обоих 
направлениях, кодируются. На 
промежуточных узлах можно 
прочитать кодированную 


информацию, но ключ, требуемый 


Всемирная сеть для ее расшифровки, недоступен 


НТТР$ лучше всего рассматривать как используемую нами службу, а не как 
нечто, требующее переопределения. 

Против использования НТТР5 можно выдвинуть ряд аргументов. Во- 
первых, для кодирования и декодирования требуется большой объем вычис- 
лительных ресурсов. Это не создает проблему на стороне клиента, так как 
клиентская программа должна обрабатывать один поток данных. На сервере 
же дополнительная нагрузка крайне нежелательна. В особенности это важ- 
но на больших узлах. В классических У\еБ-приложениях принято переда- 
вать посредством НТТР$ только критичные данные, а обычное содержимое, 
например изображения или дескрипторы, формирующее общую структуру 
документа, пересылается посредством протокола НТТР. В Ајах-приложении 
необходимо учитывать влияние модели безопасности Јауа$сгірі, согласно ко- 
торой ВИр:// и В рз:// считаются различными протоколами. Во-вторых, 
НТТР$ защищает только сам процесс передачи данных, но не обеспечива- 
ет безопасность приложения в целом. Если вы передадите по защищенному 
каналу номер платежной карточки, а затем поместите его в базу данных, 
в системе защиты которой имеются недостатки, ценная информация вполне 
может быть похищена. 

Тем не менее НТТРЅ можно рекомендовать для передачи важных данных 
по сети. Стоимость такой передачи высока, и ее не всегда можно реализовать 
на небольших узлах. Если требования к защите не столь критичны, можно 
использовать обычный протокол НТТР для передачи шифрованных данных. 
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7,3-3. Передача шифрованных данных в ходе обычного 
НТТР-взаимодействия 


Предположим, что вы поддерживаете небольшой У№еб-узел и при его рабо- 
те не возникает потребности передавать секретные данные по защищенному 
каналу. Однако пользователи регистрируются на вашем узле, и вы хотите 
принять меры, чтобы пароль не попал в руки постороннему. В этой ситуа- 
ции вам придет на помощью Јауа$сгірі. Рассмотрим основные принципы, на 
которых базируется возможное решение, а затем попробуем его реализовать. 


Открытые и закрытые ключи 


Если нам надо организовать передачу пароля, мы можем пересылать его 
в зашифрованном виде. Алгоритм шифрования преобразует входную стро- 
ку в последовательность, с виду напоминающую случайный набор знаков. 
В качестве алгоритма кодирования можно выбрать МО5. Ряд возможностей, 
обеспечиваемых данным алгоритмом, позволяет применять его для обеспе- 
чения безопасности. Во-первых, в результате преобразования одного и того 
же фрагмента данных каждый раз будут получены одинаковые результа- 
ты. Во-вторых, вероятность того, что при преобразовании двух различных 
фрагментов будут получены одинаковые выходные данные, исчезающе мала. 
Благодаря этим особенностям данные, полученные в результате применения 
алгоритма, или МП5-дайджест, могут служить достаточно надежным иден- 
тификатором ресурсов. Есть и третья особенность. Она состоит в том, что 
алгоритма обратного преобразования не существует. Поэтому МО5-дайджест 
может пересылаться по сети в открытом виде. Если злоумышленник и пере- 
хватит его, он не сможет восстановить исходное сообщение. 

Например, в результате преобразования строки Ајах іп асііоп будет сге- 
нерирован МО5-дайджест 864046Ьебаӣ2709075458с03ьбеабсҳа. Выходные 
данные будут неизменными при каждом преобразовании. Мы можем зако- 
дировать строку на стороне клиента и передавать ее в таком виде серверу. 
Сервер извлечет пароль из базы, закодирует его, используя тот же алгоритм, 
и сравнит две строки. Если они совпадут, регистрация будет считаться успеш- 
ной. Заметьте, что пароль в исходном виде по сети не передается. 

При регистрации на сервере М08-дайджест нельзя непосредственно пе- 
редавать по Интернету. Злоумышленник не может выяснить, на основе ка- 
кой исходной строки был сгенерирован дайджест, но может использовать сам 
дайджест в процессе регистрации. Здесь на помощь приходит механизм от- 
крытого и закрытого ключа. Вместо того чтобы кодировать один пароль, 
мы зашифруем его вместе с псевдослучайной последовательностью симво- 
лов, предоставленной сервером. Сервер при каждой регистрации генерирует 
новую псевдослучайную последовательность и передает ее по сети клиенту. 

На уровне клиента пользователь вводит пароль, а мы присоединяем 
к нему строку, предоставленную сервером, и шифруем результат конкате- 
нации. Переданная клиенту последовательность символов хранится на сер- 
вере. Получив от клиента идентификатор пользователя, сервер читает из 
базы пароль, присоединяет к нему запомненную последовательность симво- 
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лов, шифрует их и сравнивает результаты. При совпадении закодированных 
последовательностей регистрация считается успешной. В противном случае 
(например, если пользователь неправильно ввел пароль) процедура реги- 
страции повторяется, но при этом уже используется другая последователь- 
НОСТЬ СИМВОЛОВ. 

Предположим, что сервер передал строку аБбеа. МО 5-дайджест для после- 
довательности символов Ајах іп асііопабеа имеет вид е9924с256<373842023 
0ба6 10313787. При следующей попытке регистрации клиенту будет пере- 
дана строка \ху7. Присоединив ее к паролю и преобразовав результат, мы по- 
лучим Ш)5-дайджест 3#24а363ее2795806793с56600а8594. Злоумышленник 
видит каждое сообщение, может сохранить его, но не способен зарегистри- 
роваться посредством имеющейся информации. Таким образом, несмотря на 
возможность перехвата сообщений, воспроизвести последовательность дей- 
ствий, необходимую для успешной регистрации, не удастся. 


Псевдослучайная строка выполняет роль открытого ключа и доступна 
для всех. Пароль можно считать закрытым ключом. Он хранится в течение 
длительного времени и не должен быть доступен посторонним. 


Реализация процедуры регистрации средствами уауа$ спирт 


Для реализации описанного решения необходимо, чтобы и на стороне кли- 
ента, и на стороне сервера присутствовал МО5-генератор. Для клиентских 
программ существует свободно распространяемая библиотека генерации, ре- 
ализованная на ЈауаЅсгірі Полом Джонстоном (Рау! Јоһпѕіоп). Для того что- 
бы воспользоваться возможностями этой библиотеки, надо лишь включить ее 
в состав программы и вызвать соответствующую функцию. 

<ѕсгірі суре= 'ЕехЕе/)ауазсуи1рЕе' ѕгс= 'та5.јѕ'Х/ѕсгірё> 

<ѕсгірі буре= 'ёехі/јауаѕсгіріё '>уаг епсгуріеа=ѕіг пма5 ('Ајах'); 


// Выполнение требуемых действий 
</зсгірі> 





Для сервера алгоритм МО5 также поддерживается в ряде библио- 
тек. В РНР, начиная с версии 3, содержится встроенная функция та5(). 
В классе Јауа, ѕесигіїу. Меѕѕаверівеѕі реализованы популярные алгорит- 
мы шифрования, в том числе МО5. В .МЕТ Егатеуогк доступен класс 8уѕ- 
{ет .Ѕесигіѓу.Сгурѓовгарһу.Мр5. 

Данный подход имеет ограниченную область применения, так как, для 
того, чтобы выполнять сравнение кодированных строк, серверу должен быть 
заранее известен пароль. Таким образом, рассмотренный механизм является 
хорошей альтернативой передаче ресурсов по протоколу НТТР, но он не 
может полностью заменить этот протокол. 

Итак, на данный момент мы получили следующие результаты. Политика 
"сервера-источника" позволяет противодействовать передаче на клиентскую 
машину кода, способного повредить систему. Нам известны меры борьбы 
с атакой типа "человек посередине" при обмене данными клиента с сервером- 
В последнем разделе мы сосредоточим внимание на сервере, который также 
может стать объектом атаки. Выясним, как можно защитить М№еб-службы от 
несанкционированного доступа. 
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Рис. 7.8. В рамках инфраструктуры 
Ајах сервер предлагает свои услуги 
по Интернету Доступ к серверу 
осуществляется по стандартному 
протоколу, чаще всего НТТР. 
Ајах-клиент получает потоки данных 
с сервера. Вследствие того что 

\ММер-службы общедоступны, внешние 

узлы сети могут получать данные 
непосредственно, минуя клиента 





Внешний узел 


7.4. Управление доступом к потокам данных Ајах 


Рассмотрим стандартную архитектуру Ајах с точки зрения наличия уязви- 
мых мест в защите. Клиент, выполняющийся в среде браузера, передает за- 
просы серверу, используя протокол НТТР. Эти запросы обслуживаются про- 
цессами на стороне сервера (сервлетами, динамическими документами и про- 
граммами других типов), которые возвращают данные клиенту. Такое взаи- 
модействие условно показано на рис. 7.8. 

Услуги сервера или документы становятся доступными внешним узлам 
автоматически вследствие самой природы Интернета. В некоторых случаях 
мы даже поошряем подобное взаимодействие с сервером, в частности, пуб- 
ликуем АРІ таких служб, как еВау, Ататоп и Соое. Однако и в этом слу- 
чае нельзя упускать из виду вопросы защиты. Меры, которые мы можем 
предпринять для обеспечения защиты, описаны в следующих двух разделах. 
Во-первых, мы можем создать интерфейс У\УеЬ-служб, или АРІ, таким об- 
разом, чтобы им невозможно было воспользоваться некорректно, например, 
заказать товары, не заплатив за них. Во-вторых, имеется возможность огра- 
ничить доступ к УеБ-службам. 


7.4.1. Создание защищенных программ на уровне сервера 


Говоря о М№еБ-приложении, мы обычно имеем в виду некоторую последова- 
тельность выполняемых действий. Например, при работе с интерактивным 
магазином пользователь просматривает имеющиеся товары и помещает неко- 
торые из них в "корзинку". Процесс выбора товаров четко определен: указы- 
вается адрес, по которому должны быть доставлены товары, способ оплаты 
и порядок подтверждения заказа. До тех пор, пока пользователь работает 
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с приложением, мы можем быть уверены, что взаимодействие будет осу- 
ществляться корректно. Если же некоторый узел сети предпримет попытку 
непосредственного обращения к У\е5-службе — возможны проблемы. 


Программы сбора информации и Ајах-приложение 


Классическое У’ еб -приложение уязвимо для программ сбора информации, ко- 
торые отслеживают последовательность действий пользователя, анализируя 
НТТР-запросы и извлекая те из них, в которых содержатся данные, введен- 
ные посредством формы. Программы сбора информации могут активно вме- 
шиваться в действия приложения, нарушая порядок событий, обрабатывае- 
мых сервером, или перегружая сервер повторяющимися запросами. С точки 
зрения безопасности действия подобных программ могут стать источником 
серьезных проблем. 

В классическом У\еБ-приложении данные часто теряются в большом объ- 
еме НТМГ-кода, предназначенного для их внешнего оформления. В грамот- 
но написанном Ајах-приложении Меб-страницы, передаваемые клиенту, го- 
раздо проще и представляют собой в основном структурированные данные. 
Разделение логики и представления является признаком профессионального 
подхода к написанию программ, но оно же упрощает работу программы сбо- 
ра данных, поскольку информация, передаваемая сервером, предназначена 
в основном для разбора, а не для отображения посредством браузера. Когда 
внешний вид документа изменяется, программы сбора данных начинают ра- 
ботать менее надежно и могут даже вовсе выйти из строя. В Ајах-приложении 
правила обращения клиента к У\еБ-службе меняются редко. Чтобы обеспе- 
чить целостность приложения, нам надо тщательно продумывать структуру 
высокоуровневого АРІ, используемого при взаимодействии клиента и сер- 
вера. В данном случае под АРІ мы понимаем не НТТР, ЅОАР или ХМІ, 
а динамические страницы и параметры, передаваемые им. 


Интерактивная игра "морской бой" 


Чтобы лучше разобраться в том, как структура АРТ УеБ-службы влияет на 
безопасность приложения, рассмотрим простой пример. Создадим интерак- 
тивную версию известной всем игра "морской бой". В процессе игры Ајах- 
клиент будет взаимодействовать с сервером, используя М№еБ-службы. Нам 
надо принять меры для того, чтобы правила игры выполнялись даже в том 
случае, когда один из игроков попытается мошенничать: захватит контроль 
над клиентом, чтобы передавать данные серверу вне очереди. 

Задача игрока — угадать расположение кораблей противника. Игра со- 
стоит из двух этапов. Сначала игроки расставляют свои корабли на игровом 
поле. Затем они по очереди называют позиции, пытаясь попасть на располо- 
жение корабля противника. Копии игровых полей в процессе игры хранятся 
на сервере. Каждый клиент также поддерживает модель своего поля и поле 
другого игрока. Вначале второе поле пустое, но по мере угадывания позиций 
оно заполняется (рис. 7.9). 
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Клиент 1 





Рис. 7.9. Модели данных в Ајах-приложении, реализующем 
игру "морской бой" После расстановки кораблей на сервере 
располагаются модели игровых полей каждого участника. 
Вначале на стороне клиента содержится лишь модель своего 
игрового поля. Модель поля соперника формируется 


в процессе игры 


Таблица 7.2. АРІ для пошагового формирования игрового поля 


УВЕ Параметры 
сеагВоага.4о Идентификатор пользователя 


роѕіїоп5ћһір.ао Идентификатор пользователя, длина 
корабля, координаты (х,у), ориентация 
(№.5.Ем\№\№/) 


Возвращаемые данные 
Подтверждение 


Подтверждение или 
сообщение об ошибке 





Рассмотрим первый этап игры. Вначале игровое поле пустое. Затем поль- 
зователь размещает на нем условные изображения своих кораблей. Организо- 
вать вызов сервера в процессе расстановки кораблей можно двумя способами. 
Первый способ предполагает обращения для очистки поля и для постановки 
каждого корабля в конкретной позиции. В процессе начальных установок об- 
ращение к серверу произойдет несколько раз: один раз при очистке поля и по 
одному обращению для постановки каждого корабля. АРІ, соответствующий 


данному подходу, показан в табл. 7.-2. 


Второй способ предполагает очистку поля и установку всех кораблей 
в рамках одного обращения к серверу. В этом случае при настройке сервер 
вызывается лишь один раз. Соответствующий АРІ показан в табл. 7.3. 
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Таблица?7.3. АР!, предполагающий формирование игрового поля в рамках одного 
запроса 

ЦВЕ Параметры Возвращаемые данные 


ѕеїирВоага.ао Идентификатор пользователя, массив Подтверждение или 
структур (х,у, длина корабля, ориентация) сообщение об ошибке 


Таблица 7.4. АРІ для второго этапа игры (используется независимо оттого, какой 
подход был применен при конфигурировании игрового поля) 


ОВ Параметры Возвращаемые данные 
дчеѕѕРоѕіїоп.ао Идентификатор "й" (попадание) "тіѕѕ" (промах) или "пої 
пользователя, координаты уоигТигп" (не ваша очередь) плюс 
(х,у) обновление с учетом хода другого игрока 


Подходы, подобные описанным здесь, мы сравнивали между собой в гла- 
ве 5 при обсуждении 50А. Однократное обращение по сети оказывается бо- 
лее эффективным и лучше обеспечивает разделение уровней. Кроме того, оно 
упрощает задачу обеспечения безопасности. 

В рамках первого подхода клиент отвечает за контроль правильности 
количества и типов установленных кораблей. Модель, поддерживаемая на 
сервере, должна обеспечить проверку правильности конфигурации в конце 
настройки. Для второго подхода такая проверка может быть предусмотрена 
в формате документа, используемого при обращении к серверу. 


По окончании настройки в действие вступает служба, обеспечивающая 
очередность ходов участников игры. Исходя из правил игры каждое обраще- 
ние клиента должно соответствовать одному ходу — попытке угадать клетку, 
занимаемую каким-либо кораблем. Соответствующий АРТ описан в табл. 7.4. 

Если игра проходит корректно, оба пользователя по очереди обращаются 
к ОВГ 2ие5$5Ро$11оп.4о. Сервер следит за очередностью ходов и в случае 
ее нарушения возвращает нарушителю сообщение пої уоиг їџгп. 


Предположим теперь, что один из участников пытается играть нечест- 
но. В его распоряжении клиентская программа, которая может обращаться 
к АРІ У’еБ-службы в любой момент. Что он может предпринять, чтобы по- 
лучить преимущество в игре? Дополнительный ход сделать невозможно, так 
как сервер отслеживает эту ситуацию — очередность ходов заложена в АРІ- 

Единственный способ мошенничества — изменение положения корабля 
после окончания настройки. В рамках подхода, предполагающего многократ- 
ные обращения к серверу, можно попытаться вызвать роѕіііопЅһір. 40 в про- 
цессе игры. Если серверная часть кода разработана грамотно, сервер опре- 
делит, что это обращение противоречит правилам, и откажется обслуживать 
запрос. Однако, делая подобную попытку, игрок ничего не теряет, а задача 
разработчика серверной программы — предусмотреть подобную возможность 
и принять соответствующие меры. 
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Бели в процессе настройки разрешено лишь одно обращение к серверу, из- 
менить позицию одного корабля невозможно без очистки всего игрового поля. 
Таким образом, изменить настройку в свою пользу в принципе невозможно. 

Настройка, допускающая единственное обрашение к серверу, ограничива- 
ет свободу действий нечестного участника, не затрагивая при этом интересы 
игрока, соблюдающего правила. Если модель на стороне сервера функциони- 
рует правильно, АРІ, предполагающий многократные обращения к серверу, 
не должен предоставить возможность несанкционированного вмешательства, 
однако число точек входа, в которых такое вмешательство оказывается по- 
тенциально возможным, значительно больше. В результате разработчику сер- 
верной программы приходится выполнять намного больший объем работы по 
проверке безопасности. 


В разделе 5.3.4 мы говорили о том, что для упрощения АРІ желатель- 
но применять образ разработки Рага4е. Подобный подход желательно ис- 
пользовать и сейчас, на этот раз для повышения уровня безопасности. Чем 
меньше точек входа, доступных из Интернета, тем проще реализовать требу- 
емую политику. 

Структура АРІ может в какой-то степени защитить приложение от неже- 
лательного воздействия извне, однако некоторые точки входа должны суще- 
ствовать для того, чтобы клиентская программа Ајах могла взаимодейство- 
вать с сервером. В следующем разделе мы рассмотрим способы их защиты. 


7.4.2. Ограничение доступа к данным из Мер 


В идеале хотелось бы разрешить доступ к динамическим данным, подготов- 
ленным для нашего приложения, Ајах-клиенту (и, возможно, другим автори- 
зованным программам) и запретить его всем остальным. Некоторые техно- 
логии, обеспечивающие работу с богатыми клиентами, дают возможность ис- 
пользовать специальные протоколы, однако в Ајах-приложениях наш выбор 
ограничен НТТР. Как вы уже знаете, защищенный протокол НТТР позволя- 
ет скрыть передаваемые данные от постороннего взгляда, но он не позволяет 
определить, кто обращается по конкретному О ВГ. 

К счастью, протокол НТТР обладает большими потенциальными возмож- 
ностями, а объект ХМЕНирВеаие$ обеспечивает дополнительный контроль 
над ним. Когда запрос поступает на сервер, серверная программа имеет до- 
ступ к полям заголовка, из которых можно извлечь информацию об источ- 
нике запроса. 


Фильтрация НТТР-запросов 


Для написания конкретных примеров мы будем использовать язык Јауа. Су- 
ществуют и другие технологии, позволяющие добиться аналогичных резуль- 
татов. При создании М№еЬ-приложения на Лауа мы можем определить объект 
]ауах.зегу|ет. Е! ег, который будет перехватывать запросы. В подклассе 
Е {ег переопределим метод до Е1Щег() так, чтобы он анализирован НТТР- 
запрос перед тем, как принять решение о его передаче по назначению. В ли- 
стинге 7.5 показан код простого фильтра, который перехватывает запрос, 
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а после либо продолжает его обычную обработку, либо появляется страница! 
с сообщением об ошибке. 


Листинг 7.5. Јама-фильтр, используемый в системе защиты 


рир1іс арѕёгасі с1аѕѕ Сепегісбесигіїіуғі1ёер 1пр1етепез$ Е116ех { 
ргоіесіеа Ѕігіпсд гејесіук1=пи11; 
рчрііс уоіа 1116 (Рі1бегСопҒід сопЁід) 
СЬгом$ бегу1еіЕхсерііоп { 
// О Указание ОКІ, соответствующего отвергнутому запросу 
гејесі0к1=сопЁід.деіІпііҒЕагамебег ("кејесі0гі"); } 
рир1іс уоіа аоғі1беү ( 
Зегу1есВеачезЕ геаацезЕе, бегу1еёКеѕропѕе геѕропѕ 
Еі1ёегСсҺаіп сһаіп) 
СРкгомз ІОЕхсерііоп, Ѕегу1еёЕхсерііоп { 
// © Проверка допустимости запроса 
1Е (1ѕУа11іавеасиеѕіё (геаџеѕі)) { 
сћҺаіп.аоғЕі1бег { гедиеѕё, геѕропѕе) ; 
}е1зе 1ЁЕ {гејесё0г1!=пи11) { 
// О Обращение к ОВІ, соответствующему отвергнутому запросу 
Кеаџоеѕїіріѕраісһег аіѕраёсћһег 
=гедиеѕіё . деіВесоеѕірізѕраёсћег (кејесіук1) ; 
аі ѕраїсћһег. Еогхмага (гедаезЕ, гезропзе); } 











Й 























} 
ргосесееЯя арѕігасіё роо1еап 

іѕуа1іавеаиеѕі {бегу1е Весаезе геацеѕі) ; 
рир1іс уоіа аеѕігоу {) { } 





1 





Фильтр представляет собой абстрактный класс, в котором объявлен аб- 
страктный метод іѕҮа110Ведиеѕё (). Решение о дальнейшей судьбе запроса 
принимается на основании его анализа. Если в результате вызова метода 1$- 
\Уа11ЧВесоезе () © возвращается значение Ёа1ѕе, запрос перенаправляется по 
ОВГ ©, определенному в конфигурационном файле М№ер-приложения 0. 

Рассматриваемый здесь фильтр предоставляет возможность создавать 
конкретные подклассы, т.е. его можно адаптировать для различных стра- 
тегий защиты. 




































































Использование НТТР-сеанса 


Для поддержки сеанса часто используется следующий подход. При регистра- 
ции пользователя создается объект-идентификатор. При последующих обра- 
щениях производится проверка на наличие этого объекта. Простой фильтр, 
решающий данную задачу, показан в листинге 7.6. 



























































Листинг 7.6. Фильтр для проверки идентификатора сеанса 
рор1іс с1азз безз1опТокепбесог1$уЕ116ег 
хіепаѕ бепегісбесигіёуЕі1ёег { 
ргоіесіеа роо1еап іѕуа11аКеацџеѕі (Ѕегу1еіВесдиеѕё гесдиеѕё) { 
роо1еап уа11ій=Ға1ѕе; 
НіёрЅеѕѕіоп ѕеѕѕіоп=гесдиеѕі .десдЅдеѕѕіоп () ; 
1Е (ѕеѕѕіоп!=пи11) { 
ОѕегТокеп ёокеп= (Токеп) ѕеѕѕіоп.деёАбігірибе { 'иѕегтокеп'); 
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1Е (Еокеп!-пи11) { 
уа1іа=ёгие; 
} 
} 


гебогхп уа11іа; 





Данный подход типичен для традиционных У\е5-приложений. Если про- 
верка дает отрицательный результат, пользователю предлагается страница 
регистрации. В Ајах-приложениях ответ сервера может быть более простым 
по сравнению с традиционными МеБ-приложениями и содержать данные 
в формате ХМГ, ТЗОМ либо в виде обычного текста. В ответ на получение 
определенных данных клиент может самостоятельно предоставить пользо- 
вателю средства регистрации. В главе 11 мы обсудим реализацию средств 
регистрации в рамках приложения Ајах Рока. 


Использование зашифрованных НТТР-заголовков 


Существует еще один способ определения корректности запроса. Он пред- 
полагает добавление к НТТР-заголовку дополнительного поля и проверку 
его наличия посредством фильтра. В листинге 7.7 приведен пример филь- 
тра, который ищет конкретное поле и проверяет совпадение зашифрованного 
значения с ключом, хранящимся на сервере. 


Листинг 7.7. Филыр для проверки поля НТТР-запроса "ШВШ! 
рибИс с1аѕ5 ЗесгеНеадегзесигиуЕЩег 
ехіепаѕ СепегісЅесигііуЕ1ег { 
ргіуаѓе 5їгіпе реадеМате=пий; | 
рибИс уоіа ши(ЕШегСопй$ сопй?) (ћгомѕ ЗегмеЕхсерйоп { 
зирег. и (сопй$); 
// Имя поля задается как конфигурационный параметр 
БеадегМате-соп #12. е п1!{Рагатетег( "ПпеадегМате"); 


} 


ргосесеея Юроо1еап іѕуУа11ідвесиеѕі (5еху1е ВесоаезЕ гесиеѕі) { 
роо1еап \уа119=6гае; 
НЕсрбегу1е Весоезе фгеаоаез(= (НЕбрбегу1е Веачаезе) гесоезе; 
іЁ (ПеааехМаше ! =пџ11) { 


уа1іа=Ға1ѕе; 
// О Получение значения заголовка 
біргіп ҺеааӢегуа1 =һгедиеѕё . чесНеааех (пеайегМ\апе) ; 
Епсгуріег сгурі=Епсгурі0ёі15. геігіеуе (Пгесдиеѕі) ; 
ЇЕ (сгурі!=пџи11) { 
// © Сравнение значения заголовка 
уа1іа=сгурі . сотракге (һеайегуа1); 


} 











} 
гебогп уа1іа; 


} 
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При проверке запроса фильтр читает заголовок с определенным именем 
О и сравнивает его с кодированным значением, содержащимся на сервере 
©. Данное значение не постоянно; оно генерируется для каждого конкретЛ 
ного сеанса, что затрудняет незаконное обращение к системе. Класс ЕЯ 
сгурїег использует для генерации МХ)5-значения Арасһе Соттопѕ Содес 
и јауах.ѕесигііу.МеѕѕавеЮівеѕі. Полностью набор классов можно полД 
чить, скопировав коды примеров для данной книги. Принцип формирования 
ЛГО5-значения в шестнадцатеричном формате показан ниже. 


Меззачер1чезе 

аїісеѕі=Меѕѕасерісдеѕі .чееТизеапсе ("М5"); 
руёе[] ЯЧаба=рк1уКеу .дчееВуеес$ (); 

аісдеѕі .ир@Яафе (даса) ; 

руёе[] гам=а1ісдеѕі .д1сдеѕі (риркКеу .сдеіВуіеѕ ()); 
руёе[] 0р64=Ваѕеб4 .епсодеВаѕеб4 (гам); 

геіогп пен 5ігіпо{064); 








где ргіуКеу и рибКеу — соответственно закрытый и открытый ключ. 

Чтобы настроить фильтр для проверки всех ОКІ, соответствующих пу- 
ти /Ајах/Ӣаѓа, надо добавить к конфигурационному файлу мер.хті нашего 
приложения следующее определение: 


<НЦег 14='зесогиуЕ\Щег_Т’> 
<НЦег-паше> НеадегСвескег< /ЯЦег-пате> 
<ЯЦег- с1а55> 
сот.таппіпе.ај ахіпасііоп.међ.ЅесгеНеайегЅесигіїуЕег 
</Е1ег-с1аѕ5> 
<шИ-рагат іа='ѕесигіќуЕіег 1 рагат ['> 
<рагат-пате>тгеес О < /рагат-пате> 
<рагат-уаіие> /еггог/ге]ес(.4о< /рагат-уаше> 
</шИ-рагат> 
<шИ-рагат 19='зесоигиуЕШег 1 рагат 2'> 
<рагат-пате>һћеайегМате</рагат-пате> 
<рагат-уаіџе>ѕесгеі-раѕѕуога< /рагат-уае> 
</шИ-рагат> 
</НЩет> 
Согласно данной конфигурации отклоненные запросы после проверки 
значения поля ѕесгеі-раѕѕмога направляются (КГ, /еггог/те]ес+.4о. Кро- 
ме того, мы определяем отображение фильтрации, в результате чего фильтр 
вступает в действие для любого запроса, соответствующего указанному пути. 
<#кет-тарріпе> 
<#ег-пате> НеайегСһескег< /Ёїег-пате> 
<џугІ-райегп> /ајах/ааѓа/*< /игІі-райегп > 
</#ег-тарріпе > 
На стороне клиента для генерации МБ5-дайджеста Вазеб4 использу- 
ется библиотека Пола Джонстона (она упоминалась ранее в этой гла- 
ве). Для того чтобы добавить поле НТТР-заголовка, мы вызываем ме- 
тод ѕеіКедиеѕіНеааегїі). 
Ғопсёіоп 1оаахті (орі) { 
уаг гед=пи11; 


1Е (ух1іпаоу. ХМІНЕЄрВеачеѕі) { 
теа=пем ХМІНЕЄєрКеаиеѕі (); 
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} е!5е і? (міпаӢож.АсііуеХОбјесї){ 
геа=пем АсііуеХОбјесі(" М1сгозой.ХМЕНТТР"); 


} 
і? (тед)ғ 
геа. опгеадуѕёаёсесһапде=опКеадйуѕіаѓсе; 
геа. ореп («СЕТ',их1,Ехие); 
геа. ѕеіВКеаџеѕінНеадег (' ѕесгеї -раѕѕиога' ,сеёЕпсгуріеЯкеу () ) ; 
геа. ѕепа (рагатѕ); 











} 
Здесь функция кодирования создает МО5-дайджест Ваѕеб4 для указан- 


ной строки. 


уаг Кеу="раззмога"; 
Еорсе1оп деіЕпсгуріеакеу () { 
гебоги р64_па5 (Кеу); 





} 

Данное решение предполагает передачу Ајах-клиенту значения перемен- 
ной Кеу. Ключ для сеанса можно передать по протоколу НТТР$ при реги- 
страции пользователя. Он должен представлять собой псевдослучайное зна- 
чение, а не строку символов, например. 

Положительная особенность данного решения состоит в том. что поле 
заголовка НТТР-запроса не может быть модифицировано посредством стан- 
дартной гипертекстовой ссылки или НТМІ-формы. Злоумышленникам при- 
дется программировать НТТР-клиент, а это требует определенного уровня 
подготовки. Очевидно, что по мере роста популярности объекта ХМЕНирКе- 
доеѕі среди разработчиков информация о том, как сформировать поле заго- 
ловка в составе запроса, будет становиться все более доступной. Следует заме- 
тить, что средствами, подобными Арасһе НТТРСПепі и Рег! І№Р:: ОѕегАрепі. 
эту задачу можно было решить и раньше. 

Фильтры и другие средства аналогичного назначения не являются непре- 
одолимой преградой для тех, кто хочет обратиться к вашему узлу, но суще- 
ственно усложняют эту задачу. Как и у любого разработчика, в распоряжении 
хакера имеются лишь ограниченные ресурсы, поэтому, защитив приложение 
несколькими способами, описанными выше, вы существенно снизите вероят- 
ность несанкционированного доступа к поддерживаемой вами службе. 

На этом мы заканчиваем разговор о защите Ајах-приложений. Существу- 
ют вопросы, которые не нашли отражения в данной главе. Мы решили не об- 
суждать их лишь потому, что они типичны не только для инфраструктуры 
Ајах, но и для любых М№еЬ-приложений. Надежные средства аутентифика- 
ции и авторизации помогут вам управлять доступом к службам. Стандарт- 
ные НТТР-заголовки могут быть использованы для определения источника 
запроса, что затрудняет обращение к службе, минуя официальные каналы 
(однако не делает такое обращение невозможным). Те, кого заинтересовали 
вопросы безопасности Ајах-приложений, могут найти более подробные све- 
дения в литературе, специально посвященной этой теме. 

И наконец, помните, что безопасность — понятие относительное. Никакая 
защита не может быть абсолютно надежной. Максимум, чего можно добить- 
ся — опережать на шаг злоумышленников. Применение НТТР и проверку 
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НТТР-запросов в тех случаях, когда такие меры оправданы, можно рассмат, 
ривать как шаги в нужном направлении. 


7.5. Резюме 


В данной главе обсуждались вопросы безопасности Ајах-приложений. Мы 
сосредоточили внимание на тех особенностях, которые отличают защиту ин- 
фраструктуры Ајах от защиты обычных У -приложений. Сначала мы рас- 
смотрели "песочницу" (среду для выполнения Јауа$Ѕсгірі-программ в составе 
УеБ-браузера) и правила, предотвращающие взаимодействие фрагментов ко- 
да, полученных из различных источников. Мы также рассмотрели, как мож- 
но сделать политику "сервера-источника" менее строгой и разрешить доступ 
к сторонним Интернет-службам, например к АРТ Соозе. 

Кроме того, мы рассмотрели способы защиты данных, которыми клиент 
обменивается с сервером. Достаточно надежную защиту обеспечивает про- 
токол НТТР$, но существует и более простое решение, обеспечивающее без- 
опасную передачу пароля средствами обычного протокола НТТР. И наконец, 
мы показали вам уязвимое место Ајах-приложений, связанное с передачей 
низкоуровневых данных с сервера. Поскольку в некоторых случаях это мо- 
жет представлять серьезную угрозу, мы рассмотрели варианты архитектуры 
сервера, минимизирующие опасность. Мы также обсудили средства на сто- 
роне сервера, усложняющие несанкционированный доступ к данным. 

Вопросы, рассмотренные в данной главе, помогут вам обеспечить работу 
Ајах-приложений в реальных условиях. В следующей главе мы продолжим 
разговор о характеристиках приложений, влияющих на их практическое при- 
менение. На этот раз речь пойдет о производительности программ. 


7.6. Ресурсы 


Ключи для использования АРІ \еБ-служб Соое можно получить, обратив- 
шись по адресу ВИр://\м\\.2о00е.сот/ар15/. 

ЈауаЅсгірі-библиотеки Пола Джонстона, позволяющие создавать МО5- 
дайджесты, представлены по адресу һіір://рајһоте.оге.оиКк/сгурі/та5/ 
та55гс.һіті. Для тех, кому хочется быстро проверить МО5 в действии, мож- 
но посоветовать ОВТ, генератора контрольных сумм (Вр: //Амм\м. Е ПеЁ огтаї 
100 /1001/БазВ.В ет? (ех(* ајах+іп+асііоп). 

Библиотеку Арасһе Соттопѕ Со4ес для Јауа, которую мы использо- 
вали при генерации Ваѕеб4 МО5 на сервере, можно скопировать с узла 
Ьр://] акагѓа.арасһе.оге/соттопѕ/сойес/. 

В разделе 7.1 мы рассмотрели подписание ЈАК-файлов для созда- 
ния защищенных приложений, ориентированных на браузеры Мо7Ша. До- 
полнительная информация по этому вопросу содержится в документе 
һр: //муу.т02іПа.оге/ргојесіѕ/ѕесигіїіу/сотропепіѕ /ѕівпеа-ѕсгіріѕ. 
һёті. Сведения об игре "морской бой" доступны по адресу һіір:// 
ватеѕтиѕеит.ижаѓегіоо.са/уехһіБіі/Мһіеһі/ Ваеѕһір/. 





В этой главе... 


• Профилирование приложений Ајах 
• Управление использованием памяти 


“ Программные решения, влияющие 
на производительность 


• Особенности работы с конкретными браузерами 


часть 1. Создание профессиональных А/ах-приложенип 


В предыдущих трех главах мы говорили о надежности приложения и ег]] 
пригодности к сопровождению, в частности, о том, как оно будет работаЛ 
в реальных условиях и сможет ли разработчик модифицировать его при изме- 
нении требований к продукту. Упорядочить код приложения помогают обра- 
зы разработки, а принцип разделения ответственности позволяет уменьшить 
взаимозависимость различных частей приложения. В результате становится 
возможным быстро внести изменения в программу, не нарушив ее способ- 
ность выполнять основные функции. 

Очевидно, что приложение будет реально применимо на практике только 
в том случае, если оно работает с надлежащей скоростью и не приводит к "за- 
висанию" остальных программных компонентов, выполняющихся на той же 
машине. До сих пор мы действовали в идеальных условиях, т.е. предполага- 
ли, что на рабочей станции имеется бесконечный объем ресурсов, а браузер 
знает, как эффективно использовать их. В этой главе мы постараемся при- 
близиться к реальным условиям и обратим внимание на производительность 
приложения. Не будем забывать образы разработки и принципы реструкту- 
ризации. Известные программные решения не только предоставят термины 
для обсуждения, но и подскажут пути влияния на производительность. 


8.1. Что такое производительность 


Говоря о производительности, мы чаще всего учитываем два основных факто- 
ра; насколько быстро может работать приложение и какой объем системных 
ресурсов оно потребляет (из системных ресурсов нас обычно интересует лишь 
объем занимаемой памяти и загрузка центрального процессора). Программа, 
которая работает слишком медленно, непригодна для решения большинства 
задач. В современной многозадачной операционной системе программа, кото- 
рая приводит к остановке остальных задач, не только бесполезна, но и вредна. 
Две указанные характеристики программы связаны между собой. Ситуацию 
можно было бы исправить, увеличив скорость процессора, однако неизвест- 
но, существует ли процессор с требуемой тактовой частотой и оправдано ли 
его применение в конкретной ситуации. Мы, программисты, можем воздей- 
ствовать лишь на логику приложения. 

Вопросы производительности никогда не следует упускать из виду. Если 
мы забудем о ней, пользователи вскоре забудут о нас. 

Язык программирования, подобно шахматам, можно рассматривать как 
независимый мир, управляемый определенным набором правил. Все, укла- 
дывающееся в рамки правил, определено и полностью предсказуемо. В этом 
детерминированном мире есть свое очарование, и хочется верить, что именно 
его правила описывают систему, с которой мы работаем каждый день. Этому 
способствует и тенденция к применению виртуальных машин, позволяющих 
создавать код без учета особенностей аппаратного обеспечения. 

Желание работать в идеальной среде можно понять, но поддаваться ему 
пока рано. Современные операционные системы и прикладное программное 
обеспечение, в том числе и М№еБ-браузеры, очень сложны и не всегда описыва- 
ются простыми правилами. Чтобы написать код, выполняющийся на реаль- 
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дои машине, мы должны уметь заглянуть глубже спецификации РОМ или 
стандарта ЕСМА-262, определяющего ЈауаЅсгірі, и учитывать реальные осо- 
бенности конкретных браузеров. Если мы не будем знать "нижний уровень" 
иерархии программных средств, вряд ли нам удастся создать конкурентоспо- 
собный продукт. * 

Если приложению требуется несколько секунд, чтобы обработать щелчок 
на кнопке, или несколько минут для пересылки содержимого формы, — это 
плохое приложение, независимо от того, насколько элегантными были реше- 
ния разработчика. Если каждый раз, когда пользователь интересуется теку- 
щим временем, система запрашивает 20 Мбайт памяти, а потом освобождает 
лишь 15 Мбайт, пользователи вскоре откажутся от нее. 

ТауазсирЕ не может обеспечить достаточно большое быстродействие, 
и как бы разработчики не усовершенствовали его, этот язык никогда не при- 
близится по скорости вычислений к языку С. Объекты ЈауаЅсгірі и элементы 
РОМ требуют значительного объема памяти. Конкретные реализации брау- 
зеров далеки от совершенства и в ряде случаев напрасно расходуют память. 

Производительность Јауа$сгірі-кода имеет большое значение для разра- 
ботчиков Ајах-приложений, поскольку они вторгаются в ту область, которая 
еще не была исследована программистами. Объем ЈауаЅсгірі-кода в Ајах- 
программах намного больше, чем в классическом МеБ-приложении. Время 
жизни объектов Јауа$сгірі в Ајах-программах больше по сравнению с клас- 
сическими приложениями, потому что полное обновление УеЪ-страниц про- 
исходит гораздо реже. 

В двух следующих разделах мы обсудим две составные части производи- 
тельности, а именно скорость выполнения и потребление памяти. Завершится 
эта глава рассмотрением примеров, демонстрирующих важность образов раз- 
работки при работе с Ајах-программами и со структурой РОМ. 


8.2. Скорость выполнения Јауабсгірі-программ 


В мире, в котором мы живем, ценится скорость. Срок окончания проектов 
истекает "еще вчера". (Если вы живете в другом мире, пришлите нам пись- 
мо, а еще лучше иммиграционную карту.) Быстродействующая программа 
предпочтительнее более медленной, при условии, конечно, что они обе выпол- 
няют поставленную задачу. Нас как разработчиков кода должно волновать, 
насколько быстро он работает и как улучшить его. 

Существует правило, согласно которому скорость выполнения программы 
определяется скоростью самой медленной подсистемы. Мы можем измерить 
время работы всей программы, но результат вряд ли будет полезен. Гораздо 
лучше будет, если мы сможем выяснить быстродействие отдельных подси- 
стем. Измерение скорости выполнения отдельных фрагментов кода обычно 
называют ирофилированием. Создание высококачественного кода, как и со- 
здание любого произведения искусства, никогда не завершается, а лишь оста- 
навливается на важных этапах. (Плохой код отличается от хорошего тем, 
что его создание остановилось на этапе, который был абсолютно не интере- 
сен.) Путем оптимизации всегда можно хоть немного ускорить выполнение 
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то 
программы. Ограничивающим фактором при этом является не уровень ма. 
стерства, а имеющееся в наличии время. Выяснив с помощью инструмента 
профилирования "узкие места" нашего кода, мы можем сконцентрировать 
свои усилия для достижения наилучшего результата. Если же мы попытаем- 
ся оптимизировать код в процессе его написания, то вряд ли гарантированно 
получим хороший результат. "Узкие места" редко бывают именно там, где мы 
ожидаем их появления. 

В данном разделе мы научимся измерять различными способами вре- 
мя выполнения кода. Кроме того, мы создадим простой профилировщик на 
Јауа$сгірі и попробуем поработать с уже существующим инструментом по- 
добного назначения. Далее мы рассмотрим несколько простых программ и 
применим к ним профилировщик, чтобы выяснить наилучший способ их оп- 
тимизации. 


8.2.1. Определение времени выполнения приложения 


Самый простой инструмент измерения времени, имеющийся в нашем распо- 
ряжении, — это системный таймер, доступный из программы на ЈауаЅсгірі 
посредством объекта Рае. Если мы создадим экземпляр Оае, вызвав кон- 
структор без параметров, то получим текущее время. Если одно значение 
Рае вычесть из другого, разность будет представлена в миллисекундах. При- 
мер использования объекта Па приведен в листинге 8.1. 


Листинг 8.1. Измерение времени выполнения кода посредством Вае 


Ғопсііоп  пуТ1тмесопзом1пагарсетой Е) { 
уар Бедч1пп1па=пем Бабе{); 


// Важные и длительные вычисления 


уаг епЯ1па=пем раіеғ) ; 

уаг аоџгаёіоп=епаіпо-редіппіпо; 

а1егі ("Ёһіѕ Ғопсёіоп ёбоок "+аџгаёіоп 
+"пз ёо до ѕомеёһіпо іпёегеѕііпд!"); 


Ј о 


Мы создаем объекты Рае до начала и по окончании фрагмента кода, 
а затем определяем время выполнения этого фрагмента, вычисляя разность 
двух значений времени. В данном примере для представления информации о 
времени выполнения используется функция а[ег* (), но такое решение под- 
ходит лишь для простейших случаев. Обычно информацию о времени выпол- 
нения записывают в файл протокола, однако модель безопасности ЈауаЅсгірі 
запрещает доступ к локальной файловой системе. Самый простой подход, 
доступный в Ај ах- приложении, — это запись данных о профиле в память и 
последующее воспроизведение их в форме отчета. 

Заметьте, что, для того, чтобы результаты измерений были максимально 
достоверными, код профилирования должен выполняться настолько быст- 
ро, насколько это возможно. Запись переменной в память осуществляется 
намного быстрее, чем создание дополнительных узлов РОМ. 
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В листинге 8.2 представлена простая библиотека, реализующая секун- 
домер, которую можно использовать для профилирования кода. В процессе 
выполнения тестируемой программы информация о профиле хранится в па- 
мяти, а затем воспроизводится в виде отчета. 


уагх ѕёормаёсһ-пехт Орјесі (); 
// Массив зарегистрированных таймеров 
ѕсориаісћһ .маесспез=пем Аггауі) ; 
// Точка входа для клиентского кода 
ѕзіоруиаёсћһ. дебИаёсһ= Ғопсёіоп (іа, ѕзёкагіМох) { 
уаг маісһ-зіориаёсһ.маёсһеѕ [іа] ; 
ЇЕ {!маёсһ) { 
маёсһ=пеу ѕіориаёсһ.бЅёориаісһ (1а) ; 
} 
1Е (ѕбаг Мот) { 
маєсһ.ѕіагі (); 





} 
хебоги маєсһ; 
} 
// Конструхтор объекта, выполняющего функции секундомера 
зіориаёсһ. $ёорИаісһ= Ғџпсііоп (іЯ) { 
ёһіѕ.іа-іа; 
зіориаёсһ .маёсһеѕ [191-ЕЪ15$; 
Ећһ1іѕ.еуепёѕ-пеу Аггау () ; 
еҺіѕ.орјуУіеибрес- [ 
{паше: "соџпі", ёуре: "з1ир1е"}, 
{пате: "ёоёа1", ёуре; "вз1ир1е"}, 
{паме: "еуепіѕ", ёуре: "агкау", іп1іпе:ігие} 
1? 





) 
зіориаёсһ. $ёориаёсһ.ргоёоёуре.збагіЁопсііоп () { 
ЕҺіѕ.сиггепі=пен ТіпмедЕуепё (}; 








} 
зіориаёсһ. Ѕіориаёсһ .ргоёоіуре. ѕзіор= Ёџпсііоп () { 
ЇЕ (Еһ1іѕ.сиггепі) { 
ЕҺіѕ.соггепі.ѕіор(); 
ЕҺіѕ.еуепізѕ.аррепа (іёһіѕ.соиггепі); 
ЕҺіѕ.со0цпі++; 
ЕҺіѕ.ёоба1+=һізѕ.соиггепі .йџгаёіоп; 
ЕҺів.сиггепі-пи11; 
} 





) 
// Конструктор обработчика события измерения времени 
зіориаёсһ. ТітедёЕуепі= Ёџпсііоп () { 
Еһ1іѕ.ѕіагі=пеу рабе (); 
еҺіѕ.орјУіемнЅбрес= [ 
{паше: "ѕзіагё", ёуре: "в1ир1е"}, 
{паше: "аџогаёіоп", буре: "ѕішр1е"} 
1; 





} 

зіориаёсһ. ТіпедЕуепі .ргобобуре. ѕзёор= Ёппсёіоп () { 
уаг ѕзісор=пеу Габе О; 
еҺіѕ.аџогаёіоп=ѕёор-ёһіѕ.ѕёагі; 

1 
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Рис. 8.1. Граф объектов библиотеки-секундомера. Каждая категория представляется 
объектом, который содержит предысторию событий. Все категории доступны посредством 
объекта ѕїіормаіїсһ.маїсһеѕ, существующего в единственном экземпляре 


// Генератор отчета о профиле 
ѕіормаїсћ.герогё= ѓутсііоп(аіу) { 
уаг геа1 П1у=хСе(Е\етепЕВуГА (41у); 
уаг герогі= пем објуіемег. ОБјесїУіемег(ѕїормаїсһ.маїсһеѕ, геа! Оіу)І 


Наша система-секундомер поддерживает одну или несколько категорий, 
в каждой из которых существует одно активизированное событие и список 
предыдущих событий измерения времени. Когда клиентский код вызывает 
функцию ѕіормаїсһ, ѕїагї (), передавая ей в качестве параметра идентифи- 
катор, система создает для этой категории новый объект ѕіормаїсһ либо по- 
вторно использует существующий объект. Затем клиент может многократно 
задавать команды секундомера ѕіагі () и ѕіор(). При каждом вызове функ- 
ции ѕіор() генерируется объект ТітеаЕуепі, в котором отмечается время 
запуска и длительность события. Если запустить секундомер несколько раз 
без промежуточных остановок, все обращения к ѕїагї(), кроме последнего, 
будут проигнорированы. 

Результатом работы секундомера является граф объектов категорий 
ѕіормаїсһ, каждая из которых содержит предысторию измеряемых событий. 
Пример подобного графа показан на рис. 8.1. 

По окончании сбора данных визуализируется граф объектов. Функ- 
ция геп4ег{) использует для автоматической генерации отчета библиотеку 
Објесі Міемег (см. главу 5). В качестве упражнения мы предлагаем читате- 
лям реализовать вывод данных в формате СЗУ, что позволит включать их в 
файл. 

В листинге 8.3 приведен пример применения кода секундомера к некото- 
рой функции, выполнение которой занимает длительное время 
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листинг 8.3. Измерение времени с помощью бибпиотеки-секундомера 


Ғипсііоп туТітеСопѕопііподЕутсёіопоО ( 
уар уаісһ=ѕіориаісһ.деёсиаёсһ ("ту біте сопѕитіпод Ёцпсёіоп",ёгие); 


// Важные и длительные вычисления 


маёсһ.ѕіор(); 


} ] Р 





Код секундомера можно достаточно просто включить в программу, под- 
лежащую тестированию. Затем следует определить категории для различных 
целей. В данном примере мы назвали категорию по имени функции. 

Прежде чем переходить к новому разделу, проиллюстрируем изученный 
материал на конкретном примере. Оценим время выполнения программы 
Моџѕетаі, рассмотренной нами в главе 4. В данной программе за переме- 
щениями мыши следят два процесса. Один из них выводит информацию 
о текущих координатах в строке состояния браузера, а другой отображает 
точку, координаты которой соответствуют текущему расположению курсора 
мыши. Оба процесса представляют нам полезную информацию, но создают 
большую нагрузку на центральный процессор. Нам надо выяснить, какой из 
этих процессов потребляет больше процессорного времени. 

С помощью библиотеки-секундомер а мы можем достаточно просто реа- 
лизовать функции профилирования для данной программы. В листинге 8.4 
показана модифицированная \еб-страница, содержащая новый элемент РОТУ, 
в котором отображается отчет профилировщика. Кроме того, в текст сцена- 
рия включены обращения к секундомеру. 


Листинг 8.4. Документ шоизета{. Вит! со средствами профилирования 


<ћЋЕм1хһеаа> 
<1іпк ге1='ѕёу1еѕзћееё' буре='бехі/еѕз‚ ҺгеЁ='гаоцѕепаб.еѕѕ’ /> 
<1іпк ге1='ѕёу1еѕһееб буре='бехі/еѕѕ ҺгеЁ='орјуіекег.еѕѕ /> 
<ѕсгірі ёуре= '+ехі/јауаѕсгірі зѕгс=' х/х соге.јѕ'х/ѕсгірі> 
<зск1рЕ буре='бехі/јауазсгірі' згс``ехігаѕ-аггау.јѕ*></ѕсгірі> 
<ѕсгірі буре='Еехі/јауаѕсгірі' ѕгс='ѕіу11іпд.јѕ'></ѕсрірё> 
<ѕсгірі ёуре='ёехё/јауаѕсгірі' ѕгс='орјуіеиег . )5'х/ѕсгірі> 
<ѕсгірі буре='сехЕе/)ауазск1рЕ' ѕгс='ѕіориаісһ.јѕ'Х/ѕсгірё> 
<ѕсгіріё ёуре='Еехі/јауаѕсгрірі' ѕгс= ' еуепЕКооціег.јѕ'х/ѕсгірё> 
<ѕсгірё буре= 'їехі/јауаѕсгірі'> 
уар сигѕог=пи11; 
тіпаоу.оп1оаа= Ёопсёіоп () { 
уаг иаісһ=ѕіориаісһ.деіиаёсћһ ("утіпаӢоу оп1оаа" ‚ Ехое); 
уаг пає=дӢоси-тепё .деёЕ1епепЕВута ( 'поизегаае' ) ; 
сигзог=аосопепе ‚ чееЕ1етепЕВУТаА ('сикѕог') ; 
уаг поцѕеВоціег=пеи )зЕуепе. ЕуепіВоцёег (тас, "оптоцзетоуе") ; 
тоцѕзеКооџбег.аааіізѕіепег (игіёеѕёсаёиѕ) ; 
тоцѕеКообег.аааіізѕіепег (агауТһотрпаі1); 
маёсһ.ѕёор(); 
} 
Ғопсіїіоп мгіёеббаіиѕ (е) ё 
уаг массһ=ѕсориаісһ .одеіиаісћһ ("кісе ѕбаёиѕ" , Ехое); 
иіпаоу. зёаіиѕ=е.с1іепіх+", "+е.с1іепіҮ; 



































маёсһ.ѕбор(); 
} 
Ғопсёіоп ЯагауТһитрпаі1 (е) { 
уах маёсһ=ѕборуиаёсһ.деёИаёсһ ("дгат Еһотрпаі1",ёгие); 
согзѕог.зіу1е.1ІеЁё= ( (е. с1іепіх/5) -2) +"рх"; 
сигѕог.зіу1е.ёор= ( (е.с1іепіү/5) -2) +"рх"; 
маёсһ.ѕбор{); 
} 
</ѕсрірё> 
</Һеаа> 
<Боау> 
<аӢіу> 
<а Һге#='ј ауаѕсгірі : ѕёориаісһ. герогі ("ргоғҒі1ег") '>ргоғі1е</а> 
</діу> 
<аӢіу> 
<аіу с1аѕѕ='тоиѕеіпаї' іа=' тооѕетаї'х/аіу> 
<аіу с1аѕ5= '#һитбпаі!' 14='{Вишбпай'> 
<аіу с1аѕѕ='сигѕог ій = 'сигѕог'х/аіу> 
</аіу> 
<аіу с1Іаѕѕ='ргоѓі1ег оЫјУіемВогаӢег іа='ргоғі1ег‘х/аіу> 
</аіу> 
</боӣу> 
</ћті> 





Мы определили три контрольные точки: одну для міпаож.опІоаа и две ~ 
для обработчиков действий с мышью. Имена категорий отражают их назна- 
чение и используются при генерации отчета. Загрузим модифицированное 
приложение и проверим, как оно работает. 

При перемещении курсора мыши наш профилировщик собирает дан- 
ные, с которыми мы можем ознакомиться, щелкнув на ссылке, размещенной 
в верхнем левом углу. На рис. 8.2 показан внешний вид приложения после 
того, как пользователь выполнил несколько сотен передвижений мышью и 
задал команду генерации отчета. 

Для браузеров Егеѓох и Іпіегпеї Ехрогег мы получили сходные результа- 
ты: согласно нашим измерениям, на отображение данных в строке состояния 
расходуется приблизительно в четыре раза меньше времени, чем на движение 
точки в поле малого размера. 

Заметьте, что событие ушдо\.ошоа4 обрабатывается за 0 миллисекунд. 
Такое значение получено из-за дискретности информации, предоставляемой 
объектом Вае. При использовании данной системы профилирования мы вы- 
полняем все действия под управлением интерпретатора ЈауаЅсгірі, поэтому 
на наш код налагается ряд ограничений. При работе с Мох Ша можно вос- 
пользоваться профилировщиком, встроенным в браузер. Мы рассмотрим его 
в следующем разделе. 


8.2.2. Использование профилировщика Мепктап 


Для браузеров семейства Мо7Ша разработан большой набор встроенных мо-: 
Дулей, расширяющих их возможности. Одним из таких модулей является от- 
ладчик Уепктап, позволяющий выполнять ЈауаЅсгірі-программу в пошаго- 
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Рис. 8.2. Пример программы из главы 4, оснащенный профилировщиком на языке 
Јауа$сгірї Профилировшик генерирует отчет на основе данных, собранных 

в контрольных точках. В качестве контрольных точек мы выбрали событие 

міпаом, опіоаа, представление в поле малого размера текущей позиции курсора 

и вывод координат курсора в строке состояния Значение с о и піуказывает нато, какое 
количество записей было произведено для каждого фрагмента кода, ато та 1 — 
суммарное время, затраченное на выполнение данного фрагмента 


вом режиме. Возможности отладчика Уепктап мы обсудим в приложении 
А. Сейчас речь пойдет об инструменте, который не так широко известен, — 
о профилировщике кода. 

Для того чтобы проверить код с помощью профилировщика УепКтап, на- 
до открыть интересующий документ и выбрать отладчик из меню Тоо[5 брау- 
зера. (Конечно, это возможно только в том случае, если расширение Мепктап 
уже установлено. Инструкции по установке вы найдете в приложении А.) 
На панели инструментов отладчика находится пиктограмма с изображени- 
ем часов и меткой РгоЁШе (рис. 8.3). После щелчка на кнопке к ней будет 
добавлена метка зеленого цвета. 

С этого момента профилировщик Уепктап тщательно отслеживает все 
действия, которые выполняются под управлением интерпретатора ЈауаЅсгірі. 
Перемещайте в течение нескольких секунд курсор мыши по полю, а затем 
снова щелкните на кнопке РгоРе панели инструментов отладчика, чтобы 
остановить процесс профилирования. В меню Міпіоу отладчика выберите 
пункт РгоНе=>$ауе РгоШе Ожа Аѕ. Профилировщик позволяет сохра- 
нить данные в различных форматах, в том числе СЗУ (для электронных 
таблиц), НТМГ (для генерации отчетов) и ХМІ. 

К сожалению, профилировщик УепКтап генерирует слишком большой 
объем данных, в начале которых перечисляет ОВГ, сһготе://. Это внутрен- 
ние компоненты браузера, реализованные на ЛауаЗст!рё; нас они не интересу- 
ют. Помимо методов, код которых находится в составе НТМТ-доку мента, в ре- 
гистрируемых данных находят отражение также функции каждой из исполь- 
зуемых библиотек ЈауаЅсгірі, в том числе профилировщик ѕіоруаќѓсһ.јѕ> 
описанный в предыдущем разделе. На рис. 8.4 показан раздел НТМТ-отчета, 
соответствующий главной НТМГ-странице. 
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Рис 8.3. Отладчик Мепктап для браузера Мога с активизированной кнопкой 
Рго1{! | е Метка на кнопке означает, что система осуществляет сбор данных о времени, 
затраченном на выполнение всех загруженных сценариев (информация о них 
отображается на левой верхней панели) 





Рис. 8.4. Фрагмент отчета, сгенерированный профилировщиком Мепктап В отчете 
отображаются число вызовов, общее, минимальное, максимальное и среднее время 
для каждого метода обрабатывающего в нашем примере действия с мышью 


Данные, сгенерированные с помощью Уепктап, хорошо согласуются с ре- 
зультатами, полученными с помощью объекта-секундомера, а именно: запись 
в строку состояния занимает приблизительно в три раза меньше времени, 
чем отображение точки, представляющей текущее положение курсора. 

Уепктап — полезный инструмент профилирования, не требующий моди- 
фикации кода программы Если вам необходимо выполнить профилирование 
в нескольких браузерах, вам поможет библиотека-секундомер. В следующем 
разделе мы рассмотрим несколько примеров реструктуризации кода, направ- 
ленной на ускорение его работы. Для проверки результатов будет использо- 
вана библиотека-секундомер. 
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8.2.3. Оптимизация скорости выполнения А/ах-приложения 


Оптимизация кода — это нечто, наверняка имеющее отношение к черной ма- 
‚ЙИ. Составление ЈауаЅсгірі-программ для УеБ-браузеров часто выполняется 
методом проб и ошибок- На основании таких предпосылок трудно вывести 
ясные правила оптимизации Адах-кода. Оптимизация давно стала объектом 
ОГ>ток, многие из которых небезосновательны. И все же, используя библио- 
теку профилирования, знакомую вам из раздела 8.2.1, постараемся получить 
положительные результаты. В этом разделе мы рассмотрим три стратегии, 
направленные на повышение скорости выполнения программы, и применим 
их на практике. 


Оптимизация цикла Тог 


Первый из рассмотренных нами примеров демонстрирует ошибку, которую 
часто допускают программисты, и способы ее устранения. Она встречается не 
только в ЈауаЅсгірі-программах, и в данном случае нас интересует лишь код 
Ајах-приложения. В нашем примере выполняются длинные и бессмыслен- 
ные вычисления. Они нужны нам для того, чтобы показать, сколько времени 
можно сэкономить, используя правильный подход. В данном случае мы будем 
вычислять последовательность чисел Фибоначчи, в которой каждое следую- 
щее число представляет собой сумму двух предыдущих. Приняв в качестве 
исходных данных две единицы, мы получим следующий набор чисел: 


1, 1, 2; 3, 5, 8, 


Программа на языке ЈауаЅсгірі, вычисляющая такую последовательность 
чисел, выглядит следующим образом: 
Ғопсёіоп Ёіропассі (соопі) { 
уаг а= 1; 
уаг р= 1; 
Ғог (уар 1=0; Ксоцпі; і++) { 
уаг іоёа1=а+р; 
а=); 
р=ёоба1; 
) 


геёигп Ы; 

} 

Последовательность чисел Фибоначчи нужна нам лишь потому, что для ее 
вычисления требуется достаточно длительное время. Предположим теперь, 
что нас интересует сумма всех положительных целых чисел, не превышаю- 
щих п-е число Фибоначчи. Код для вычисления этой суммы может иметь 
такой вид: 


уаг {01а1=0; 
Ғог (уаг 1=0;1<#Ыопассі(соипі);і++){ 
ї01а1+ =1; 
} 
Результаты вычислений не имеют практического значения, но сама про- 
грамма иллюстрирует проблему, которая часто возникает на практике, — 
попытку вычислить на каждой итерации некоторую величину. Приведенный 
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код работает неэффективно. Причина в том, что на каждом шаге цикла вызы- 
вается функция Г! ібопассі (соип®), несмотря на то, что результат ее выполне- 
ния остается постоянным. Правила записи цикла Гог таковы, что в некоторых 
случаях подобная ошибка может остаться незамеченной. Код надо переписать 
так, чтобы функция Г Фопасс! () вызывалась только один раз. 


уаг їоїа1=0; 

уаг 1оорСоопіег= Ғіропассі (сот) ; 

Ғог (уар 1=0;1< 

1оорСочпёег 

;і++) { 

соёба1+=1; 

} 

Итак, мы оптимизировали код. Но насколько? Если оптимизации подле- 
жит большой объем кода, необходимо знать, оправданы ли затраченные на 
нее усилия. Для того чтобы ответить на этот вопрос, мы поместим оба вари- 
анта кода в состав \УМеб-страницы и туда же включим библиотеку-секундомер, 
позволяющую выполнить профилирование каждой функции. Код страницы 
показан в листинге 8.5. 


Листинг 8.5. Профилирование цикла Тог 

<Һіт1> 

<ћеаа> 

<1іпк ке1'зку1езбеес' буре='бехі/еѕѕ' Һгеғ= 'тоџѕепаё.сѕѕ' /> 
<1іпк ге1='ѕёу1еѕћһееі' суре='ЕехЕе/езз' һгеЁ='орјуіеиег.еѕѕ' /> 
<зсгірі ёуре=' бехі/ јауаѕсгірі` зус?х/х_ соге. јѕз'х/зсгірі> 











<ѕсгірі ёбуре= '+ехі/јауаѕсгіріё' зѕгс='ехігаѕ-аггау.јѕ'Х/ѕсгірі> 
<всгірі ёуре='+ехі/јауазсгірі згс='зіу1іпд.јѕ'х/ѕсгірі> 
<ѕсгірі ёуре='іехё/јауаѕсгірі' ѕгс='орјуіеиег.јѕ'Х/ѕсгірё> 
<зск1рЕе ёуре='іехё/јауаѕсгірі' ѕгс='ѕёориаёсһ.јзѕ'Х/ѕсгірё> 


<ѕсгірі ёуре='ехі/јауаѕсгірі' зхс='еуепЕВоцеех. ) ѕ'Х/ѕсгірі> 
<ѕсгірі ёуре= 'ёехі/јауаѕсгірі'> 
Ғопсёіоп $1о\оор (соџпі) { 
уар маєсһ=ѕёориаєсһ.деёиаісһ ("51ом 10оор" ,ігие); 
уаг ёоба1=0; 
// Вызов функции на каждом шаге цикла 
Ғог (хаг 1=0;1<Е1ропасс1 (соџпё) ;і++) { 
Соба1+=1; 











} 
маёсһ.ѕёор(); 
аіегі (боёа1); 
} 
Ғопсёіоп Каз Гоор (сооџпё) { 
уар маісһ=ѕіориаісһ.одеіиаёсһ ("ЕазЕ 1оор" ,Егие) ; 
уаг ёоёа1=0; 
// Граничное значение вычисляется один раз 
уаг 1оорСоџпёбег= і ропассі (соот); 
Ғог (хаг 1=0;1<1оорСоопіег;і++) { 
Соба1+=1; 





} 

маёсһ.ѕёор(); 

а1егі (соёа1); 
} 


// Вычисление чисел Фибоначчи 





Глава 8 Производительность приложения 315 


Таблица 8.1. Результаты профилирования для оптимизации цикла Тог 


длгоритм Время выполнения (в миллисекундах) 
Исходный вариант 3085 
Оптимизированный вариант 450 


Ғипсііоп Ёібопассі(соипі) { 
уаг а=]; 
уагЬ =1; 
Гог{уаг 1=0; Ксоопі; 1++) { 
уаг ѓоѓа1 =а+ь; 
а=; 
р= (ога; 


геіигп 6; 
} 
Ғџпсііоп 90 (15Раз®) { 
уаг сооп =рагзе1пі (аоситепё .деёсЕ1емепЕВутІа { "соопё") .уа1ое); 
1Е {соџпё==М№аМм) { 
а1егі ("р1еазе епіёег а уа1іа питрег"); 
}е1зе 1Е (іѕҒаѕі) { 
ҒаѕіІоор (сооп); 
}е1зе{ 
$1омГоор (соппЕ); 


} 








} 
</ѕегірі> 
</Һеаа> 
<Боду> 
<аіу> 
<а һгеѓғ='јауаѕсгірі:ѕ51оруаїсһ.герогі("ргоЁі!1ег")' > ргоѓЁ1е</а> &пЫѕр; 
<іприі 14='соип уаше='25'/> & пЪзр; 
<а һгеѓғ= 'јауаѕсгірі: во(їгие)'> Ғаѕі Іоор</а>ѕпЫѕр; 
<а һгеғ='јауаѕсгірі: во(Ға15е)'>51оу Іоор</а> 
</аіу> 
<аіу> 
<аіу сІаѕѕ='ргоѓҒіег оЫјУіемВогаег іа='ргоѓіег'> </аіу> 
</аіу> 
</боду> 
<> Е 


Функции $1о\ГоорО и Ёа$1Гоор?) представляют два варианта алгорит- 
ма. Обращение к ним осуществляется из тела функции до (). На странице 
присутствуют гипертекстовые ссылки, позволяющие обращаться к каждому 
"арианту цикла. Порядковый номер числа Фибоначчи задается с помощью 
поля редактирования, содержащегося в НТМІ-форме. Для того чтобы вре- 
мя вычислений находилось в разумных пределах, мы выбираем порядковый 
номер, равный 25. Третья гипертекстовая ссылка воспроизводит отчет о про- 
филировании. Пример результатов проверки приведен в табл. 8.1. 
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Таким образом, мы видим, что вынесение длительных вычислений за пре- 
делы цикла ог дало существенные результаты. Однако это не обязательно 
справедливо для каждой программы. Чтобы представлять себе реальные ре- 
зультаты выполненной работы, надо осуществить профилирование. 


Следующий пример типичен для Ајах. В нем мы рассмотрим создание 
узла РОМ. 


Присоединение узлов СОМ к документу 


Для того чтобы отобразить данные в окне браузера, мы обычно создаем узлы 
РОМ, а затем присоединяем их к дереву документа: либо к ӣоситепі.бойу, 
либо к другому узлу. Как только узел ООМ становится частью документа, 
он воспроизводится. Таков порядок включения новых элементов, и изменить 
его невозможно. 

Для отображения документа в окне браузера необходимо определить па- 
раметры, определяющие расположение элементов; а это часто предполагает 
большой объем вычислений. Если мы собираем сложный пользовательский 
интерфейс, имеет смысл создать сначала все узлы, соединить их друг с дру- 
гом, а лишь потом включить всю полученную структуру в документ. В этом 
случае компоновка элементов на странице осуществляется лишь один раз. 
Рассмотрим простой пример создания элемента-контейнера, в который мы 
включаем большое количество узлов РОМ. Говоря о примере, мы первым 
упомянули узел контейнера, логично будет, если именно его мы и создадим 
в первую очередь. Необходимый для этого код приведен ниже. 

уаг сощашег=доситепЕ. сгеаїіеЕІетепі("аіу"); 

сощашег.с1а°Мате='тоизетае; 
уаг ощегио${=4оситепе .веіЕ1еіпепіВу1а( ор’) ; 
оцѓегтоѕі.аррепасћіаѓсопѓаіпег); 
Гог(уаг 1=0;1<соипѓ;і++){ 
уаг пойе=Ьситепі.сгеаќеЕ1етепі('іу ) ; 
по4е.с1а5$Мате='сигзог' ; 
поае.ѕїіуІе.роѕіїіоп = 'абѕоІ0ѓе"; 
поае.ѕіу1е Іеѓі=(4+рагѕе1пї(Маїћ.гапаоті) М92)) +"рх"; 


пойе.ѕїіуІе.їо0р=(4+рагѕе1п1(Маїһ.гапаот() М92) Н"рх"; 
сопіаіпег.аррепасһіа(пойе); 


Здесь оцїегтоѕії — существующий элемент РОМ, к которому мы присо- 
единяем наш контейнер, который, в свою очередь, включает несколько узлов 
РОМ. Поскольку мы сначала включили в документ контейнер, а затем стали 
заполнять его, наш документ подвергся модификации соипі+1 раз. Незначи- 
тельно преобразовав код, мы изменим ситуацию. 

уаг сопіаіпег= аосипепі . сгеасеЕ1етмепё ("Яіу") ; 

сопёаіпег. с1аѕѕ0аме= тоцѕепіаё ; 

уаг опёсегтоѕі=дӢоситепі . деёЕ1етмепЕВу1аё'ёор') ; 

Ғоү (уар 1=0;і<соцпё;і++) { 
уаг поае=аосомепе . сгеасеЕ1етмепі ('діу') ; 
поае.с1ІаѕѕМапе= 'сигѕог' ; 
поде . ѕіу1е.роѕіёіоп^'арѕо1оіёе'; 
поде.ѕёу1Іе.ІеЁё= { 4+рагѕеіпі (Маһ. гапаотм () *492) >+"рх"; 
поде.ѕёу1Іе.ёор= (4+рагзеїІпі (Маһ. гапаотм () *492) ) +"рх"; 
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сопѓаіпег. аррепасћі1а(пойе); 


) 


оціегтоѕі.аррепасћі1а(сопѓаіпег); 


По сути, мы изменили положение только одной строки, но теперь суще- 
ствующий документ модифицируется лишь один раз. В листинге 8.6 показан 
код страницы, на которой с помощью библиотеки-секундомера сравниваются 
два варианта действий по включению контейнера. 


Листинг 8.6. Профилирование процедуры включения элемента РОМ 
<ВЕт1> 
<Һеаа> 


<1іпк ге1='ѕбу1еѕһееб буре='бехі/еѕѕ' Һгеғ='тоџѕегоаё.еѕѕ /> 
<1іпк ге1='зёбу1еѕһееё' ёуре='бехі/еѕз` Һгеғ='орјуіенег.еѕѕ! /> 
<ѕсгірі +уре= '+ехё/јауаѕсгірё!' згс='х/х соге. јѕ'х/зѕсгірі> 
<ѕсгірі +уре='+ехё/јауаѕсгірі! ѕгс='ехігаѕ-аггау. уѕ'></ѕсгіріё> 
<ѕсгірі буре ех /јауазсгірі' згс='зіу1іпо. $ 'Х/зск1ре> 
<ѕсгірі ё+уре='+ехі/јауаѕсгірі! згс='орјуіемег. јѕ'х/зсгірі> 
<зсгірі ёуре='+ехі/јауазсгірі! згс='ѕёіориаёсһ. јз'х/зсгірі> 
<ѕсгірі ёуре='ёехі/јауаѕсгірі! згс='еуепёКоџёег. јѕ'Х/зсгірі> 
<зсгірі буре ‘&ехі/јауазсгірі'> 
уаг сигзог=по11; 
Ғопсёіоп 5ѕ1омМоаеѕ (соипё) { 
уаг маїсһ=ѕіориаїсһ.деїМаёсћ ("51ом поаез", гие); 
уар сопіаіпег=аоситепі . скеаёеЕ1етепі ("діу") ; 
сопіаіпег, с1аѕзѕзмМате= ! тоџцѕетаї! ; 
уаг ооџёегтоѕі=аосотепі . деіЕ1ІемепіВу1аё '6ор'); 
// Присоединение пустого контейнера 
оцсегпоѕі . аррепасћі1а (сопёаіпег) ; 
Ғоү (уар 1=0;і<соцџпі;і++) І 
уар поае=аосимепе . сгеабеЕ1етепё ('діу) ; 
поде .с1аѕѕМапе= 'сигѕог'; 
поде.ѕіу1е.роѕібіоп='арѕо1оёе ; 
поде.ѕёу1е.1еЁё= (4+рагѕе1піё { Маёһ . гапдот () *492) ) +"рх"; 
поде.ѕзёу1е.іор= (4+ракѕеІпіімаёһ. гапаото* 'і92п+ "рх"; 
сопёаіпег .аррепасћһі1а (поде) ; 
} 
маёсһ.ѕіор(); 





























} 
Ғопсёіоп ҒаѕіМоадеѕ (соопё) { 
уаг маёсһ=ѕіор-маёсһ.деёуіаёсһ ("ЕазЕ пойеѕ", ское); 
уаг сопіаіпег= доситмепі . сгеаёеЕ1етмепі ("Яаіу"); 
сопбаіпег.с1аѕѕмапе= ' тоџѕетаі' ; 
уаг оџцсегпоѕі = аоситепі .дчесЕ1етепЕВУТа ('ёор' ) ; 
Ғогү (уар 1=0;і<соопі;і++) { 
уаг поде-доситепё . сгеаёеЕ1етмепё ['а1у'); 
поде.с1аѕѕмапе= 'сигѕог'; 
поде.зѕіу1е, роѕіёіоп= 'арѕо1поіе'; 
поде. ѕіу1е. 1Іе#ё=Н+рагкѕе! п (Маііі, гапаот() *492)) +"рх" ; 
поде.ѕёу1Іе.іор= (4+рагѕе1пі (Маёһ .гапаом () *492) ) +"рх"; 
сопёаіпег.аррепасһі1а (поде) ; 
1 
// Присоединение контейнера, заполненного компонентами 
оціегтоѕі . аррепасһі1а (сопёаіпег) ; 
маёсһ.ѕіор(); 
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Таблица 8.2. Профилирование процедуры создания узлов ВОМ 


Алгоритм Число операций компоновки Время выполнения 
страницы (в миллисекундах) 

Исходный вариант 641 681 

Оптимизированный 1 461 

вариант 


} 
Ғопсіёіоп до (іѕЕаѕі) { 
уаг соџпі=рагѕе1пі (аосотепё . сеіЕ1 етепіВута (" соцпё") .уаіпе) ; 
ТЕ (соопё==М№а№) { 
а1егі ("рІеаѕ пег а уа11а потре"); 
Је1ѕе 1Е (іѕЕаѕіё) { 
ЕазЕМоаез (соопі); 
}е1ѕе{ 
з1о\Моае$ (соцпі) ; 








</ѕсгірё> 
</ћеаа»> 
<роду> 
<аіу> 
<а ҺгеЁ= 'јауаѕсгірЕ : ѕзёіориаёсһ.герогі ( "рроЁі1ег") '>ргоЁі1е</а>&пЮрѕр; 
<іприі іа='соџпі' уа1џе='640'/>5прѕр; 
<а Һге#=`јауаѕсгірё :до (Егие) '>Ғаѕі 1оор</а>ѕпрѕр; 
<а һгеЁ='јауаѕсгірі:до(Ға1ѕе)'>ѕ1ои 1оор</а> 
</аіу> 
<аіу 1а='Еор'> 
<аіу с1а55='тоцѕетаї іа='тооиѕетаї' > </аіу> 
<аіу сІаѕѕ='ргоѓіег оЫјУіемВогаег іа='ргоѓіег'Х/аіу> 
</аіу> 
</роду> 
</ҺЕті> 


Как и ранее, Б нашем распоряжении есть две гипертекстовые ссылки, 
позволяющие вызвать "быструю" и "медленную" функцию. Параметром яв- 
ляется значение, введенное в поле НТМІ-формы. На этот раз мы указываем, 
сколько узлов РОМ следует включить в контейнер. Мы выбрали значение 
640. Результаты проверки представлены в табл. 8.2. 

И снова шаги по оптимизации, предпринятые из соображений здравого 
смысла, дали результат. Профилирование показывает различие между исход- 
ным и оптимизированным вариантами кода. В данном случае мы сэкономили 
приблизительно треть времени. При другом взаимном расположении узлов 
результаты будут иными. (Заметьте, что в примере использовалось только 
абсолютное позиционирование, что упрощает задачу системы компоновки.) 

Наш последний пример имеет отношение к особенностям языка ЈауаЅсгірі. 
Мы сравним различные подсистемы и постараемся выявить "узкие места". 
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Минимизация “числа точек" 


3 Тауабсирь как и во многих других языках, можно обращаться к перемен- 
ным, используя сложную иерархию объектов. При этом родительский объект 
отделяется от дочернего точкой. Например: 


туСгапаҒаќћег.сІоск.ћҺапаѕ.тіпиѓе 


Это выражение представляет собой ссылку на минутную стрелку дедуш- 
киных часов. Предположим, что мы хотим иметь ссылки на все три стрелки. 
Для этого нам надо написать следующие выражения: 

уаг ҺоџгНапа=туСгапаЕаѓһћег.сІоск.һапаѕ.һоиг; 

уаг тіпиѓеНапа= туСгапараќћег.сІоск.ћһапаѕ.тіпиѓе; 

уаг ѕесопаНапа= туСтапаҒаіћег.сІоск.ћҺапаӣѕ.ѕесопа; 

Каждый раз, когда интерпретатор встречает имя, следующее после точки, 
он обращается к дочернему объекту. В предыдущем примере интерпретатору 
пришлось выполнить поиск дочернего объекта девять раз, причем некоторые 
из операций поиска дублировали друг друга. Перепишем пример следующим 
образом: 

уаг һапаѕ=туСгапаҒаѓһег.сіоск.һапаѕ; 

уаг һоџгНапа=һапаѕ.һоџг; 

уаг тіпиѓеНапа=һапаѕ.тіпиќе; 

уаг ѕесопаНапа=һапаѕ.ѕесопа; 

Теперь поиск дочернего объекта осуществляется всего пять раз, а интер- 
претатор избавлен от лишней работы. В компилируемых языках, например 
в Јауа или С#, компилятор выполняет оптимизацию автоматически. Нам 
неизвестно, существует ли версия ЈауаЅсгірі- интерпретатор а, реализующая 
подобную возможность, и, если есть, в каком браузере она используется, 
поэтому позаботимся об оптимизации сами. Воспользуемся для этой цели 
библиотекой- секу ндомер ом. 

Рассмотрим в качестве примера программу, которая вычисляет силу гра- 
витационного взаимодействия двух тел, например Земли и Луны. С каждым 
телом связаны некоторые физические свойства, например, масса, положение, 
скорость и ускорение. Эти параметры используются при вычислении грави- 
тационного взаимодействия. Поскольку мы обсуждаем обращение к объектам 
посредством имен, разделенных точками, оформим свойства в виде графа. 

уаг еагіһ={ 

рһуѕісѕ: { 
таз: 10, 
роѕ:{ х:250,у:250 }, 
уе:{ х:0, у:0 }, 
асе:[ х:0, у:0 } 

Б 

Объект верхнего уровня, рһуѕісѕ, здесь лишний; мы включили его лишь 
Для увеличения количества точек при обращении к свойству. 

Выполнение приложения происходит в два этапа. Сначала вычисляется 
состояние в фиксированные моменты времени — расстояние, сила притяже- 
ния, ускорение и другие характеристики, о которых многие из нас не вспо- 
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минали с университетских времен. Данные для каждого момента времени 
записываются в массив, в частности, в него помещаются сведения о положе- 
нии каждого тела. 

На втором этапе отображаются траектории тел; вычисления производятся 
на основании данных, подготовленных на первом этапе. Максимальные и ми- 
нимальные значения координат используются для выбора области, в которой 
будут выводиться траектории. В реальном приложении имело бы смысл вы- 
водить данные в ходе имитации, но мы разделили программу на два этапа 
чтобы иметь возможность выполнить профилирование для каждого из них. 


Как и ранее, определяем два варианта кода: неэффективный и оптими- 
зированный- В неэффективном коде используем при обращении к объектам 
столько точек, сколько возможно. Ниже приведен фрагмент кода (на урав- 
нение не стоит обращать внимание). 


уаг вгау=(еагіһ.рһуѕісѕ.таѕѕ*тооп.рһуѕісѕ. таѕѕ) /(4151*а15(*ргауЕ); 
уаг хОтау=егау*(415Х / 151); 

уаг убтгау=вгау* (11Ү / 151); 
тооп.рһуѕісѕ.асе.х=-хбгау/(тооп.рһуѕісѕ.таѕѕ); 
тооп.рћһуѕісѕ-асе.у=-уСгау/(тооп.рһуѕісѕ.таѕѕ); 

тооп.рһуѕісѕ.уе1. х+=тооп.рһуѕісѕ.асе.х; 
тооп.рһуѕісѕ.уе1.у+ = тооп.рһуѕісѕ.асе.у; 
тооп.рһуѕісѕ.роѕ.х+ = тооп.рһуѕісѕ.уе1.х; 
тооп.рһуѕісѕ.роѕ.у+ = тооп.рһуѕісѕ.уе1. у; 


Большое число повторяющихся операций поиска дочернего объекта остав- 
ляет простор для работы над кодом. Ниже приведен его оптимизированный 
вариант. 


уар шр=пооп.рһуѕісѕ; 
уаг пра=пр.асс; 
уагпру=пр .\уе1; 

уаг трр-тр.роѕ; 

уаг прм^тр.паѕѕ; 


уаг сдгау= (ерт*трт) / (аіѕе*аіѕі*агауЕ) ; 

уаг хСгау=дгау* (аїіѕЕх/аіѕё); 

уаг убгау=адгау* (а1ѕёҮ/аізѕі) ; 

пра.х=-хбгау/ (щрт); 

пра .у=-уСгау/ (трт) ; 

пру.х+=пра.х; 

пру.у+=тра.у; 

прр.х+=тру.х; 

прр.у+=пру.у; 

Мы выполнили необходимые преобразования в начале программы и со- 
хранили результаты в переменных. В результате код стал более удобочита- 
емым и, что на данном этапе для нас более важно, снизилась нагрузка на 
интерпретатор. В листинге 8.7 показан полный код Међ-страницы, позволя- 
ющий сравнить два алгоритма. 


Листинг 8.7. Профилирование действий по обращению к переменным 
<һетіхһеаа> 

<Пак ге1='5#уІеѕһееї' їуре='ехї/еѕѕ' Һгеғ='тоцѕетаї.сѕѕ /> 
<Ппк ге1='ѕіуІеѕһееі, ќуре='ехі/еѕѕ' Һгеғ='објуіемег.еѕѕ' /> 


<ѕсгірі ёуре='бехі/јауаѕсгірі ѕгс='х/х соге. јѕ'х/ѕсгіріё> 
<ѕсгірі ёуре='Еехі/јауаѕсгірі' ѕгс='ехігаѕ-аггау.ј ѕ'></ѕсгірі> 
<ѕсгірі ёбуре='бехі/јауаѕсгірі ѕгс^'ѕіу1іпа.јѕ'Х/зѕсгіріё> 
<зск1рЕ Суре ` бехі /јауаѕсгірі!' ѕгс='орјуіеиег. јв'></ѕсго рі> 
<ѕсгірі ёуре='ёехі/јауазсгірі згс='ѕіориаёсһ.јз'Х/ѕсгірі> 
<ѕсгірі ёбуре='іехі/јауаѕсгірі' ѕүгс^'еуепЕКоціег.ј5'Х/ѕсгірі> 
<ѕсгірё іуре= 'ехё/јауаѕсгірі'> 
// Инициализация данных о планетах 
уаг тооп= { 
рһуѕісѕ: { 
па$$:1, 
роѕ:{ х:120,у:80 }, 
уе1:[ х:-24, у:420 }, 
асе: { х:0, у:0 } 
ТЕ 
}; 
уаг еагіһ= { 
рһуѕісѕ: { 
тадѕ:10, 
роѕ:{ х:250,у:250 }, 
уе1:{ х:0, у:0 }, 
асе: { х:0, у:0 } 
1 
}; 
уаг дгауғ=100000; 
Ғопсііоп зромОкр1е (соџпі,іѕҒаѕі) { 
// О Выбор типа вычислений 
уаг даёа= (1ѕҒаѕё) ? 
Ғаѕёраёба (соцпі) 
ѕ1оираёа (соцпі); 
уаг маёсһ=ѕёориаёсһ.деёиаісһ ("гепаег" ,ёгие) ; 
// © Отображение орбиты 
уаг сапуаѕ=аоситепі . чесЕ1етепЕВу!а& ('сапуаѕ' ) ; 
уаг дах=дӢаёа.пах.х-даёса.тміп.х; 
уаг ду=дӢаіа.тах.у-даёа.тіп.у; 
уаг ѕх= (ах==0) ? 1 : 500/ах; 
уаг ѕу= (4у==0) ? 1 : 500/ау; 
уаг оЁЁх=Яӣаёба.тіп.х*=х; 
уар оЁҒу=дӢаёа.тіп.у*ѕу; 
Ғог (уар 1=0;і<аӢаёса-раёһ.1еподёһ;і+=10) { 
уаг аасит=даёса.раёһ [1]; 
уаг арт=ааёит. тооп; 
уаг ЯӢре=Яаіот.еагіһ; 
уаг поопріу=дӣосимепі . сгеаёеЕ1етмепё ("діу"); 
поопріу.с1аѕѕМапе='сигзог”'; 
гаоопріу.ѕіу1е.роѕіііоп= 'арзо1абе' ; 
поопріу.ѕіу1е.1еЁё=рагѕе1пі ( (дарт. х*ѕх) -оЕЁх) +"рх"; 
поопріу.ѕіу1е.іор=рагѕе1іпі ( (арт. х*ѕх) -оЁЁу) +"рх" ; 
сапуаз .аррепасһіта (тоопріу); 
уаг еагіһріу=аӢосипмепі . сгеасеЕ1етмепі ("а1у"); 
еагіһріу.с1аѕѕМапе= 'сигѕог'!; 
еагЕһріу.ѕіу1е.роѕіііоп= 'абзо1аее' ; 
еагіћріу.ѕіу1е.1еЁё=рагкѕе1пі ( (аре, х*ѕх) -оЕЁх) +"рх"; 
еагіћріу.ѕіу1е.Еёор=рагѕе1пі ( (аре.х*эх) -оЕЁУ) +"рх"; 
сапуаѕ .аррепасһіта (еагёһріу) ; 
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маёсһ.ѕёор(); 
} 
// © Использование максимального количества операций 
// поиска дочерних объектов 
Ғипсііоп $1омафка (соџпіё) { 
уаг массһ=ѕіоримаісһ .деіхаёсһ ("$1ом огріё" ,ёгие); 
уаг Чаба=\{ 
м1: {х:0,у:0}, 
мах: {х:0,у:0}, 
раеп:П 
}; 


} 
маёсһ.ѕёор(); 
геіицгп Чака; 
} 
// О Использование минимального количества операций 
// поиска дочерних объектов 
Ғипсіёіоп Ёаѕіраёѓа (сопп®) { 
уаг маєсһ=ѕёориаёсһ.десиаёсһ {"ЕазЕ о’кЪ1е", ское); 
уаг ааѓа= { 
тіп:{х:0,у:0)}, 
пах: {х:0,у:0}, 
раһ: [] 
Де 


} 
маёсһ.ѕёор{); 
геіогп Часа; 
} 
Ғопсёіоп до{іѕЕаѕі) { 
уаг соопё=рагѕе1пі (аӢосиотепі . деёЕ1 емепЕВу!а{ " соџпі") .уа1ое); 
1Е (соџпі==М№аМ) { 
а1егіё ("р1еаз пег а уа1іа поимрег"); 
}е1ѕе{ 
ѕћоинОогріё (соцпё,іѕГазѕі); 


} 








} 
</зск1рЕ> 
</ћеаа> 
<Боау> 
<аӢіу> 
<а һге#`јауаѕсгірі : ѕіориаёсһ. герогі ( "ргоғі1ег") '>рхоЕ11е</а>&пЪзр; 
<1прие ід='соцпі уа1џе='640'/>&пЫзр; 
<а һгеЁ= 'јауаѕсгірі :до (ігие) '>Ғаѕі 1оор</а>&прѕр; 
<а һгеЁ `јауаѕсгірі:до (Ға1ѕе) '>ѕ1ои 1оор</а> 
</аіу> 
<аіу 19='6ор'> 
<аіу с1аѕѕ='поџѕегааё' іа='сапуаѕ'> 
</а1іу> 
<аіу с1аѕѕ='ргоғі1ег ор^УіемВогаег' іа='ргоЁі1ег'Х/аіу»> 
</аіу> 
</роду> 
</ћЕт1> 
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«Таблица 8.3. Профилирование результатов для различных вариантов обращения 
кпеременным 


длТоритм Время выполнения (в миллисекундах) 
Исходный алгоритм вычислений 94 

Оптимизированный алгоритм вычислений 57 

Воспроизведение (среднее значение) 702 


Структура страницы уже знакома вам. Функции $10\Оаа() © и Ғаѕіра- 
{а() О содержат два варианта кода, реализующего этап вычислений. Они ис- 
пользуются на первом этапе вычислений при генерации структуры данных О. 
Мы не приводим здесь полный код вычислений так как его запись заняла бы 
много места. Различие между вариантами алгоритма ясны из приведенных 
выше фрагментов; кроме того, вы можете скопировать полный код примера. 
С каждой функцией, выполняющей вычисления, связан объект ѕіоруаїѓсһ, 
выполняющий ее профилирование. Обращение к функциям осуществляется 
в теле ѕпомОгбії (). На основании вычисленных данных эта функция отобра- 
жает траектории ©. Ее профилирование осуществляется с помощью третьего 
секундомера. 

Элементы интерфейса в данном случае те же, что и в предыдущих 
двух примерах. Посредством гипертекстовых ссылок вызывается "быстрый" 
и "медленный" варианты вычислений, а параметр вводится посредством по- 
ля редактирования. В данном случае параметром является число точек, для 
которых выполняется имитация. При активизации третьей ссылки отобра- 
жаются результаты профилирования. В табл. 8.3 отображены данные, полу- 
ченные для 640 точек. 

И снова мы видим, что в результате оптимизации достигнуто значитель- 
ное увеличение скорости — сэкономлено более трети времени, требовавше- 
гося ранее для вычислений. Мы можем сделать вывод, что первоначальная 
догадка о том, что количество точек в сложных именах влияет на скорость 
вычислений, верна. 

Но если мы рассмотрим все этапы работы, то увидим, что оптимизирован- 
ная программа выполняется за 760 миллисекунд, а неоптимизированная — 
за 792 миллисекунды, т.е. выигрыш в результате оптимизации ближе к 5, 
чем к 40%. В данном случае узким местом приложения является не функ- 
ция, выполняющая вычисления, а подсистема отображения. Таким образом, 
сосредоточив внимание на оптимизации процесса вычислений, мы приняли 
неправильное решение. 

Этот пример демонстрирует еще один важный аспект профилирования. 
Одно дело — знать, что некоторый фрагмент кода можно оптимизировать, 
и совсем другое — представлять себе результаты, которые можно получить 
от оптимизации. Мы видим, что операции со структурой РОМ занимают 
приблизительно в восемь раз больше времени, чем подготовка данных, но это 
справедливо лишь для данного конкретного примера. Возможно, что в других 
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ситуациях дело обстоит так же, но выяснить это можно, лишь выполнив 
измерения, причем желательно сделать их для разных платформ и браузеров. 
Наэтом мы заканчиваем разговор о профилировании и скорости выполне- 
ния программ. Рассмотренные примеры дают полное представление о том. ка- 
кую пользу можно извлечь, правильно выполняя профилирование при работе 
над проектом Ајах. Предположим, что благодаря профилированию вы до 
бились приемлемой скорости выполнения кода. Однако производительность 
зависит не только от скорости работы, но и от объема памяти, используемой 
приложением. Этому вопросу и будет посвящен следующий раздел. 


8.3. Использование памяти Јауабсгірі-кодом 


Этот раздел посвящен вопросам управления памятью в Ајах-программах. 
Некоторые из рассмотренных здесь решений применимы для любой си- 
стемы и любого языка программирования, другие специфичны для Ајах- 
приложений и даже для конкретных МеБ-браузеров. 

Выполняющееся приложение запрашивает у операционной системы опре- 
деленный объем памяти. В идеальном случае программа должна получить 
столько памяти, сколько необходимо для эффективного решения поставлен- 
ной задачи, и вернуть неиспользуемую память системе. Если приложение 
написано непрофессионально, оно может потреблять неоправданно много па- 
мяти либо не возвращать память системе по окончании работы. 

По мере перехода от простых У№еБ-страниц к богатым клиентам Ајах ка- 
чество управления памятью все больше влияет на время отклика программы 
и надежность ее работы. Применение стандартных программных решений 
помогает создать код, простой для восприятия и сопровождения, а также 
выявить причины утечки памяти и устранить их. (Утечкой памяти мы будем 
называть ситуацию, при которой программа запрашивает память у системы 
и не возвращает ее после завершения работы.) 

Начнем с рассмотрения общих вопросов управления памятью. 


8.3.1, Борьба с утечкой памяти 


В любой программе может иметь место утечка памяти. Вопросы выделения 
памяти и ее освобождения требуют пристального внимания разработчиков, 
применяющих языки, в которых не предусмотрено автоматическое управле- 
ние памятью, например язык С. В ЈауаЅсгірі имеется подсистема "сборки 
мусора", которая автоматически следит за выделенной памятью и освобож- 
дает ее, если она не используется. Это позволяет избежать многих проблем, 
типичных для языков, в которых отсутствуют подобные средства, однако 
было бы ошибкой считать, что при наличии подсистемы управления утечка 
памяти не может произойти. 

Процедура "сборки мусора" пытается выяснить, можно ли удалить неис- 
пользуемую переменную, при этом она учитывает возможность доступа к ней 
по сети или посредством ссылок, содержащихся в других переменных. Если 
получить доступ к переменной невозможно, она помечается как разрешен- 


ная к удалению, и на следующем шаге занимаемая ею память освобождается 
(момент времени, когда это произойдет, предсказать невозможно). Забывая 
удалить ссылки на переменную после того, как работа с ней окончена, мы со- 
здаем условия для утечки памяти, которая может иметь место даже в языках 
с управлением памятью. 

Рассмотрим простой пример. Определим объектную модель, описываю- 
щую домашних животных и их хозяев. Начнем с хозяев; для их описания 
используем объект Регзоп. 

РапсНоп Регѕоп(пате)! 


1615. паше=пате; 
1һіѕ.реїѕ=пеу Аггау();} 


Хозяину может принадлежать один или несколько домашних любимцев. 
Когда человек приобретает животное, он сообщает о том, что у того теперь 
есть конкретный хозяин. 

Регѕоп.ргоѓоѓуре.ааарРеі=ѓипсііоп(реї){ 

1118.реїѕ[реї. пате] =реѓ; 
Ш (реї.аѕѕіспОмпег){ 
реї.аѕѕівпОмпег(һіѕ);} 

} 

Аналогично, когда человек удаляет животное из списка своих любимцев, 
он сообщает животному о том, что оно больше никому не принадлежит. 

1115.гетоуеРе{реҸате)=ѓипсііоп{ 

уаг огрһап=һіѕ.реїѕ[ре{Ҹатеј]; 
{01$ . реёѕ[ре“Маггіеј=пи, • 


16 (огрһап.ипаѕѕізпОмпег) { 
огрћап.ипаѕѕівпОмпег(һіѕ);) 


} 


В любой момент времени хозяин знает, какие животные ему принадлежат, 
и может управлять списком своих любимцев посредством методов айареї () 
и гетоуерРеї(). Человек информирует животное о принадлежности хозяи- 
ну или ее отсутствии, считая, что животное автоматически начнет считать 
человека своим хозяином (подобное поведение можно предполагать по умол- 
чанию, а необходимую проверку выполнять в процессе работы программы). 

Определим два типа домашних животных: кошку и собаку. Эти животные 
различаются по своему отношению к хозяину, кошка не обращает внимания 
на тот факт, кому она принадлежит, а собака привязывается к человеку на 
всю жизнь. (Мы приносим извинения всему животному миру за столь вольное 
обобщение.) 

Таким образом, определение кошки может выглядеть как показано ниже: 

Ғопсііоп Са(пате){{1$.пате=пате;} 

Саїѓ.ргоѓоїуре.аѕѕівпОупег=Ғипсііоп(ретѕоп){} 

Саїѓ.ргоѓоѓуре.ипаѕѕієспОмпег=ѓипсіоп(регѕоп){} 

Кошка не интересуется фактом своей принадлежности кому-либо, поэто- 
му тело соответствующих методов пусто. 

Опишем теперь собаку. Она помнит, кому она принадлежит, и после то- 
го, как человек откажется от нее, по-прежнему считает его своим хозяином 
(многие собаки ведут себя именно так). 
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Ғопсііоп ЮОоғв(пате){{һћіѕ.пате=пате; } 

"Ров .ргоѓоїуре.аѕѕівпОмпег= Ёипсііоп(регѕоп){ 
{61$. омпег=регзоп; } 

Юоѕв.ргоѓоѓуре.ипаѕѕівпОмпег= Ёипсііоп (регзоп ) { 
(61$. омпег=регзоп; } 


Объекты Са! и ров представляют собой реализации класса Реї, но пове- 
дение их нельзя назвать корректным. Оно соответствует букве соглашения 
о принадлежности, но не его "духу". В Тауа или С# мы можем явным обра- 
зом определить интерфейс Реї, но это не спасет классы, реализующие его, от 
неправильного поведения. При работе над реальными проектами специали- 
сты, занимающиеся объектными моделями, тратят много времени, исправляя 
некорректное поведение реализаций интерфейсов. 


Поработаем немного над моделью. Создадим три объекта. 


1. )1м-— Регѕоп 
2. мпіѕкегѕ — Са 
3. Е190 — род 


В первую очередь создадим экземпляр Регѕоп (этап 1). 

уаг јип=пеу Регѕоп("јіт"); 

Далее сделаем человека владельцем кошки (этап 2). Экземпляр уһіѕКегѕ 
создается в процессе вызова метода а4аРе{(), поэтому ссылка на объект Сай 
существует лишь до завершения метода. Однако объект јіт также созда- 
ет ссылку на уһіѕКегѕ, а она доступна в течение всего времени существова- 
ния объекта ут. 


јіп.ааарРеі(пем Саї("уһіѕКегѕ")); 


Пусть теперь јіт владеет также собакой (этап 3). В отличие от мһіѕКегѕ, 
мы объявим для этого объекта глобальную переменную. 


уаг ЁЕ1Чо=пем род ("Ё1ао"); 
јім.ааареѓ (#іао) ; 


Однажды јіт решает избавиться от кошки (этап 4). 
јіт.гетоуереї("һіѕКегѕ") ; 


Затем он решает, что собака ему тоже не нужна (этап 5). Наверное, он 
собирается переехать в другой город. 


ј ім. гепоуереё ("Ғідо"); 


Мы также больше не интересуемся этим человеком и удаляем ссылку на 
него (этап 6). 


т=п, - 
И наконец, мы удаляем ссылку на НЯ4о (этап 7). 
#ао=пиі11; 
По окончании этапа 6 мы считаем, что избавились от объекта јіт, поскольку 


присвоили соответствующей переменной значение пи. На самом деле ссыл- 
ка на него существует в Идо и доступна посредством выражения #40. ожпег. 
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Система "сборки мусора" не затронет этот объект, и он останется незамечен- 
ным в области памяти, называемой "куча" (һеар), интерпретатора Јауа$Ѕсгірі. 
ТІйшь на этапе 7, когда переменной бао присваивается значение пиП, объект 
“т становится недоступным, и память может быть освобождена. 

В нашем простом сценарии проблема не является серьезной, к тому же 
„на быстро решается, но данный пример иллюстрирует, как решения, не за- 
висящие друг от друга, на первый взгляд, влияют на процесс "сборки мусо- 
ра’. Объект бао не обязательно будет удален сразу же после јіт, и если мы 
преду`м°'Р"" *"*" возможность хранить информацию о нескольких преды- 
дущих владельцах, то в памяти может остаться целый набор объектов Регзоп, 
ведущих призрачное существование, но занимающих реальные ресурсы. Если 
бы мы объявили бао при вызове метода, а ссылку на объект Саі поместили 
в глобальную переменную, то такое явление не возникло бы. Для того чтобы 
оценить, насколько серьезную проблему может создать подобное поведение 
объекта Йо, нам надо ответить на следующие вопросы. 


1. Какой объем памяти он может занимать с учетом ссылок на объекты, ко- 
торые в других обстоятельствах были бы удалены? Мы знаем, что в дан- 
ном примере бао может ссылаться только на один объект Регѕоп. Но 
даже в этом случае не исключено, что объект Регзоп содержит ссылки 
на 500 объектов Сай, поэтому объем расходуемой памяти может быть су- 
щественным. 


2. В течение какого времени память будет оставаться занятой? В рассмот- 
ренном примере ответом на этот вопрос будет "не очень долго". Одна- 
ко впоследствии между удалением јіт и бао могут появиться коман- 
ды, выполнение которых будет занимать длительное время. Более того, 
язык ЈауаЅсгірі позволяет создавать программы, управляемые события- 
ми, и удаление јіт и Идо может происходить при обработке различных 
событий. В этом случае, чтобы предсказать, в течение какого времени 
будет занята дополнительная память, пришлось бы анализировать ти- 
пичные сценарии работы пользователя. 


Ни на один из приведенных выше вопросов непросто ответить. Самое луч- 
шее, что можно сделать, — это задавать их себе в процессе создания и мо- 
дификации кода и выяснять в процессе тестирования, правильны ли наши 
предположения. 

Мы рассмотрели основные принципы управления памятью. Однако суще- 
ствуют проблемы, специфические для приложений Ајах. Обсудим их в сле- 
дующем разделе. 


8.3.2. Особенности управления памятью в приложениях Ајах 


Мы рассмотрели понятия, лежащие в основе управления памятью, для мно- 
гих языков программирования. Отслеживать объем используемой памяти 
и доступность переменных важно при работе над любым приложением, од- 
нако есть также вопросы, специфические для Ајах. Ајах-программы ра- 
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ботают в управляемой среде, контейнере, который предоставляет некото! 
рые функции и запрещает пользоваться другими. Это несколько меняет об- 
щую картину. 

В главе 4 мы разделили Ај ах-приложение, на три подсистемы — модель І 
представление и контроллер. Модель, как правило, состоит из обычных объ- 
ектов Јауа$Ѕсгірї. Разработчик определяет эти объекты и предусматривает со- 
здание их конкретных экземпляров. Представление в основном состоит из уз- 
лов РОМ — объектов, которые браузер предоставляет ЈауаЅсгірі-программе. 
Контроллер является связующим звеном между моделью и представлением. 
Реализуя контроллер, необходимо уделять особое внимание управлению па- 
МЯТЬЮ. 


Устранение циклических ссылок 


В разделе 4.3.1 мы рассмотрели принцип обработки событий, позволяющий 
связать объектную модель предметной области (часть подсистемы модели) 
с узлами РОМ (частью подсистемы представления). Попробуем применить 
данный подход для задач, связанных с управлением памятью. Ниже приведен 
конструктор модели предметной области, соответствующей кнопке. 

Ғопсіоп ВиНоп(уаше,4отЕ!){ 

(015, дот Е|=дотЕГ; 
{015.уаше=уаше; 
115.дотЕ1.БийопОЫј=(һ15; 

» 1ћіѕ.аотЕ1.опсііск=1һіѕ.сісКкНапаіег; 

Заметьте, что между элементом РОМ аотЕ и сахмим объектом создают- 
ся двусторонние ссылки. Ниже приведена функция обработки событий, на 
которую ссылается конструктор 

Воёёсоп.ргоёоёуре.с1іскНапаїег= Ёопсёіоп (еуепе) { 

уаг риііопорј =ћіѕ.рибёопорј; 

уаг уа1ае= (риііопорј && БаббопоЬ].уа1ае) ? 
роёёопорј .уа1џе : "опКкпоитп уа1ае"; 

аїіегі (уа1ае); 

} 

Как вы помните, функция обработки события вызывается не объектом 
Вов, а узлом РОМ; этот факт влияет на формирование контекста. Ссыл- 
ка представления на модель нужна нам для того, чтобы обеспечить взаи- 
модействие с уровнем модели. В данном случае мы читаем свойство уаше. 
В других ситуациях вызываются функции объектов, составляющих модель 
предметной области. 

Объект типа Виќќоп доступен до тех пор, пока хотя бы один из остальных 
доступных объектов содержит ссылку на него. Точно так же элемент РОМ 
доступен до тех пор, пока на него ссылаются другие доступные элементы. 
Если элемент РОМ присоединен к главному документу, он остается доступен, 
даже если в программе нет на него ни одной ссылки. Таким образом, если 
элемент РОМ, являющийся частью документа, связан с объектом Виќќоп, 
последний не будет удален системой "сборки мусора" до тех нор, пока мы 
явным образом не разорвем эту связь. 
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Если модели предметной области взаимодействуют со структурой РОМ, 
зозможно существование локального объекта ЈауаЅсгірі, на который не ссы- 
лается ни одна глобальная переменная, определенная в программе, но ко- 
торый, тем не менее, доступен посредством РОМ. Для того, чтобы создать 
условия для удаления этого объекта подсистемой "сборки мусора", нам надо 
раписать простую функцию очистки. (Поскольку такая функция вызывается 
‚ручную, ее можно рассматривать как шаг в сторону объектов С++.) Для 
объекта ВиЙоп эта функция будет иметь следующий вид: 


Вибёоп. ргоёоёуре.с1еапур= Ёцпсііоп () { 

еһіѕ.аотЕ1 . роёбёопорј=пи11; 
ећіѕ.аомЕ1=пи11; 

} 

Первая строка в теле функции удаляет ссылку узла РОМ на объект. Вто- 
рая строка удаляет ссылку объекта на узел РОМ. Данная функция не раз- 
рушает узел, а лишь присваивает переменным, в которых ранее хранились 
ссылки, значение пи|. В данном случае узел РОМ передавался конструктору 
нашего объекта в виде параметра, поэтому мы не отвечаем за его дальнейшую 
судьбу. В других ситуациях такая ответственность может быть возложена на 
нас, поэтому рассмотрим вопрос управления этим узлом. 





Управление элементами РОМ 


В приложениях Ајах, в особенности тех, в которых используются сложные 
модели предметной области, узлы РОМ создаются и включаются в состав де- 
рева документа из программы. В классических М№еЬь-приложениях формиро- 
вание узлов РОМ чаще всего производится при первой загрузке документа на 
основании НТМТ-описания. Объект Објесіуіежег, рассмотренный в главах 
4 и 5, и подсистема оповещения (см. главу 6) содержат объекты модели пред- 
метной области, способные к отображению. Отображение осуществляется пу- 
тем создания элементов РОМ и присоединения их к главному документу. До- 
полнительные возможности предполагают дополнительную ответственность. 
Если узел создан программой, мы обязаны позаботиться и о его удалении. 

Ни спецификация РОМ, разработанная МЗС, ни ее реализации в попу- 
лярных браузерах не предусматривают способа удаления созданного узла 
РОМ. Единственное, что мы можем сделать, — это разорвать связь между уз- 
лом и деревом документа и надеяться, что после этого узел будет обнаружен 
и удален системой "сборки мусора". 

Рассмотрим простой пример. Приведенный ниже фрагмент сценария де- 
монстрирует всплывающее окно с сообщением. Для его обнаружения исполь- 
зуется выражение ӣӢоситепї.веїЕІетепіВу1а(). 

Ғопсйоп Меѕѕаре(іхі, іітеоиї)! 

уаг Бох=аоситепё.сгеаѓеЕетепі("аіу"); 
бох.іа="теѕѕавеђох"; 
бох.сІаѕѕпате="теѕѕаверох"; 

уаг {хИ\Моде=аоситеп(.сгеаеТех Моде (1х0; 
бох.аррепасіһіа(іхіМоае); 
ѕе:Тітеош("тегтоуеВох('теѕѕавребох!)", іітеоиі); 


330 Часть Ш Создание профессиональных Ајах-приложений 


ГапсНоп гетоуеВох(14){ 
уаг Бох= аоситепї. еї Е \етеп( Ву! 4 (14); 
і? (5ох){ 
рох. ѕїу1е.аіѕр1Іауѕ'попе'; 


} 


При обращении к функции Меззазе () отображается окно с сообщением 
и устанавливается таймер, который по прошествии определенного времени 
вызывает другую функцию, удаляющую окно. 

Переменные Бох и 1х Мо4е создаются локально и исчезают из области 
видимости сразу после того, как выполнение функции Меѕѕаре () завершает- 
ся, но созданные узлы документа остаются доступными, так как они была 
присоединены к дереву РОМ. 

Функция- гетоуеВох () удаляет узел РОМ по окончании работы с ним. 
С технической точки зрения сделать это можно различными способами. 
В примере, рассмотренном выше, мы удалили окно, запретив его отображе- 
ние. В этом случае элемент, хотя и не отображается, продолжает занимать па- 
мять. Если нам потребуется снова отобразить его, мы сделаем это без труда. 

В случае необходимости мы также можем исключить узел РОМ из доку- 
мента и считать, что др того момента, когда система "сборки мусора" обнару- 
жит и удалит его, пройдет немного времени. Заметьте, что мы не разрушаем 


переменную и не можем контролировать период, в течение которого объект 
останется в памяти. 


Ғопсіоп  гетоуеВох(1а){ 
уаг Ббох=аоситепї.веїЕетепіВу1а(іа); 
Ш (бох && Бох.рагеп Моде) { 
Бох.рагеп Моде.гетоуеСВИа(Бох); 
} 


} 


Мы можем сформулировать два принципа удаления элемента пользова- 
тельского интерфейса: удаление путем сокрытия (Кетоуе Ву Н1А1) и уда- 
ление путем отсоединения (Кетоуе Ву Юеќасһтепі). Для объекта Меззаее 
не определены обработчики событий — по прошествии определенного време- 
ни он исчезает. Если мы свяжем объект модели предметной области и узлы 
РОМ в двух направлениях, как мы сделали это для объекта ВиЙоп, и за- 
хотим выполнить удаление путем отсоединения, мы должны будем явным 
образом вызвать функцию с[1еапОро. 

Оба подхода имеют свои преимущества и недостатки. Главный аргумент 
в пользу выбора одного из них — это необходимость повторно использовать 
узел РОМ. Если речь идет об окне, предназначенном для отображения со- 
общения, то, вероятнее всего, оно понадобится нам в дальнейшем, поэтому 
целесообразно прибегнуть к удалению путем сокрытия. Если же речь идет 
о специфическом элементе, например об узле сложной древовидной структу- 
ры, проще будет разрушить элемент по окончании работы с ним, чем хранить 
ссылки на неиспользуемые узлы. 
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Выбрав принцип удаления путем еокрытия, мы должны принять соответ- 
ствующие меры для того, чтобы повторное использование узлов РОМ стало 
возможным. Модифицируем функцию создания окна с сообщением так, что- 
бы она сначала проверяла, существует ли узел, и создавала новый только 
„ случае необходимости. Перепишем конструктор объекта Меѕѕаре следую- 
щим образом: 

Ғопсйоп Меѕѕаре(іхі, іітеоиї){ 

уаг Бох=аоситепі.веЕіетепіВу1а{"теѕѕаверох"); 
уаг 1х Моде=доситепе.стеж{еТех Мо4е(1х0; 
Ш (Бох==п011){ 

рох=ӣоситепї. сгеаіеЕІетепі("іу"); 

Бох .іа="теѕѕавебох"; 

рох .с1аззпаме="меззадерох"; 

рох. зёу1е.діѕр1ау= 'р1оск'; 

рох .аррепасһі1а (Е хЕМоае); 
}е1ѕе { 

уаг о1атхіМоде=рох.Ёігзісһі1а; 

рох .гер1асесһі1а (Е хЕМоае ‚ оТатхЕМоае); 
} 


зееТ1меоче ("гетоуеВох ( 'шеззадерох') ",іітмеоиі); 

} 

Теперь мы можем сравнить два принципа создания элемента пользова- 
тельского интерфейса. Назовем их созданием при любых условиях (Стеаїе 
АГуауѕ) и созданием при отсутствии (Стеме Ш Мот Ехіѕіѕ). Создание при 
любых условиях использовалось нами в исходном примере, а создание при 
отсутствии — в его модифицированном варианте. Поскольку идентификатор 
заложен в коде программы, в каждый момент времени может отображаться 
одно сообщение (такое ограничение нас вполне устраивает). Если мы имеем 
возможность связать объект модели предметной области с узлом РОМ, пред- 
назначенным для повторного применения, объект может быть использован 
для хранения первоначальной ссылки на узел РОМ, в результате принцип 
создания при отсутствии не противоречит наличию нескольких экземпляров 
объекта. 








На заметку При написании приложения Ајах важно помнить о том, что 
занимать память могут не только объекты, ссылки на которые 
хранятся в переменных, но и элементы РОМ. Также необходи- 
мо принимать во внимание тот факт, что элементами РОМ 
можно управлять и удалять их по окончании работы. Если 
в программе используются как элементы РОМ, так и обыч- 
ные переменные, желательно создавать специальные функции 
очистки для того, чтобы не допускать существования цикли- 
ческих ссылок. 


В следующем разделе мы рассмотрим еще один вопрос, который необ- 
ходимо принимать во внимание, создавая Ајах-программу, предназначенную 
для работы в Іпѓегпеї ЕхріІогег. 
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Особенности работы в среде Іпїегпеї Ехр!огег 


В разных браузерах реализованы различные варианты "сборки мусора", ков 
торые могут отличаться друг от друга. Конкретный механизм работы дан- 
ной системы в Пиегпе{ Ехр]отег мало кому известен в деталях, но участники 
группы новостей сотр. 1ап;. Лауазсг!рЕ сходятся во мнении о том. что эта си- 
стема испытывает серьезные трудности при обработке циклических ссылок 
между элементами РОМ и обычными объектами ЈауаЅсгірі. По этой причине 
желательно вручную удалять подобные ссылки. 


В качестве примера рассмотрим следующий код, в котором создаются 
циклические ссылки: 


Ғопсііоп МуОрјес+ (19) { 
Е515.19=1а; 
еҺіѕ. Егопі=аоситепі . сгеаёбеЕ1етпепі ("а1у"); 
еҺіѕ. Егопі .раскіподорј=һіз; 








ЗЕ 

Здесь тип МуОЫјесі определен пользователем. Каждый экземпляр объек- 
та ссылается на узел РОМ с помощью свойства 1һіѕ.Ёгопі, а в узле РОМ 
с помощью 1181$ .БаскіпеОбБј поддерживается обратная ссылка на объект 
Јауа$сгірі. 

Для того чтобы удалить циклическую ссылку после окончания работы 
с объектом, мы можем использовать метод, подобный следующему: 

МуОрбјесі.ргоѓоѓуре.йпаіхе=ѓипсііоп(){ 


1һіѕ.Ёгопі.баскіпеОБј= пи; 
118. Ёгопё= пои; 


} 

Устанавливая значения обоих свойств равным пи, мы разрушаем цик- 
лическую ссылку. 

Для очистки дерева РОМ может быть применен универсальный способ, 
который состоит в обходе дерева и удалении ссылок с определенным именем 
или определенного типа. Ричард Корнфорд (Кісһага Согпѓіога) предложил по- 
добную функцию для обработчиков событий, связанных с элементами РОМ 
(ссылка на нее приведена в конце главы). 

На наш взгляд, универсальные подходы можно применять лишь в край- 
них случаях, поскольку обработка больших древовидных структур, типичных 
для богатых клиентов Ајах, будет происходить слишком медленно. Специ- 
альные функции, предусмотренные в коде программы, позволяют выполнять 
очистку тогда, когда она действительно необходима. 

Еще одна особенность Іпѓегпеї Ехрогег — это наличие высокоуровневой 
недокументированной функции СоПесїіСагравеО- В Іпѓегпеї ЕхрІогег б эта 
функция существует и может быть вызвана, но похоже, что она не выполняет 
никаких действий. Нам, во всяком случае, не удалось выявить разницу в 
объеме используемой памяти до и после обращения к пей. 

Теперь, когда вы имеете сведения об управлении памятью, научимся изме- 
рять ее объем и применять результаты измерений в реальных приложениях. 
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8 4. Разработка с учетом производительности 


В начале данной главы мы выяснили, что производительность приложения 
определяется скоростью его выполнения и объемом занимаемой памяти. Мы 
также упомянули о том, что стандартные программные решения могут по- 
МОЧЬ добиться ВЫСОКОЙ производительности программ. 

В этом разделе вы узнаете, как измерить объем памяти, занимаемой ре- 
альным приложением. Здесь же мы рассмотрим простой пример, показы- 
вающий, что причины слишком большого потребления памяти программой 
иногда могут быть выявлены лишь в результате глубокого анализа исполь- 
зуемых алгоритмов. 


8.4.1. Измерение объема памяти, занимаемой приложением 


Для измерения скорости выполнения программы мы могли применять как 
Јауа$сгірё-код, а именно объекты Рае, так и специальные программы. 
В ЈауаЅсгірі отсутствуют встроенные средства для определения объема ис- 
пользуемой памяти, поэтому для решения этой задачи надо полагаться на 
внешние инструменты. К счастью, такие инструменты существуют. 

Выяснить, какой объем памяти потребляет браузер в процессе выполне- 
ния приложения, можно различными способами. Самый простой, способ сде- 
лать это — анализировать выполняемые процессы с помощью утилит, ори- 
ентированных не конкретную операционную систему. В Міпаомѕ это Таѕк 
Мапазег, ав Опіх — команда ор, вызываемая с консоли. Рассмотрим каж- 
дый из этих инструментов. 


\ММпаом/$ Так Мападег 


Программа УМпдо\з ТазК Мапарег (рис. 8.5) существует для различных вер- 
сий системы, однако пользователям \УИшао\з 95 и 98 она недоступна. М№іпӣожѕ 
Таѕк Мапарег предоставляет информацию обо всех процессах, выполняемых 
в операционной системе, и об используемых ими ресурсах. Обычно данная 
программа вызывается из меню, отображаемого после нажатия комбинации 
клавиш <СігІ+АІС+ ОеІеѓе>. Интерфейс Таѕк Мапарег состоит из нескольких 
вкладок. Нас интересует вкладка Ргосеѕѕеѕ. 

Строка, выделенная на рисунке, сообщает нам, что в текущий момент 
Ецеюх использует около 38 Мбайт памяти. Информация о потребляемой 
памяти отображается в столбце Меп Озазе. В некоторых версиях УИп9о\з 
пользователь может добавить дополнительные столбцы, используя меню 
Уіеу=>ЅеЈесі Соїіштпѕ (рис. 8.6). 

Отображая наряду с Метогу Озазе значение МУігіџа! Метогу 517е, мож- 
но получить полезную информацию о работе программы. Если Метогу Оѕаве 
представляет активизированную память, выделенную приложению, то Міг- 
іџаї Метогу 517е отображает информацию о неактивизированной памяти, 
записанной в раздел свопинга. При минимизации Міпӣоуѕ-приложения зна- 
чение в столбце Мап Чзазе существенно уменьшается, аУи{иа! Метогу 517е 
становится более или менее постоянным, показывая, какой объем ресурсов 
приложение может потреблять в дальнейшем. 
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Рис. 8.5. Программа \УМпаомѕ Тазк Мападег отображает список 
выполняемых процессов и используемую ими память Процессы 
отсортированы по убыванию объема занимаемой памяти 


Утилита їор 


Консольная программа ѓор, предназначенная для выполнения в системе {іх 
(а также в Мас ОЅ Х), предоставляет приблизительно ту же информацию, 
что и М№Міпаожѕ ТазК Мапарег (рис. 8.7). 

Как и в случае программы Таѕк Мапарег, в каждой строке представлены 
активизированный процесс, объем потребляемой памяти, нагрузка на цент- 
ральный процессор и некоторые другие сведения. Управление программой 
{ор осуществляется с клавиатуры, команды описаны в справочной системе, 
кроме того, информацию о них можно найти в Интернете. Мы не будем рас- 
сматривать подробно программу тор, а также аналогичные средства, предо- 
ставляющие графический интерфейс, например СМОМЕ Ѕуѕќіет Мапарег. 


Инструменты с расширенными возможностями 


Помимо рассмотренных простых инструментов, существуют более мощные 
средства, которые позволяют контролировать использование памяти, а так- 
же предоставляют подробные сведения о внутреннем состоянии операцион- 
ной системы. Мы не можем уделить внимание всем существующим инстру- 
ментам, поэтому вкратце рассмотрим лишь два из них. Эти программы рас- 
пространяются бесплатно, и, на наш взгляд, их использование может помочь 
разработчикам. 
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Рис. 8.6. Выбор дополнительных столбцов для отображения на вкладке 
Ргосеѕѕеѕ программы Таѕк Мападег. УігіиаІ Метогу Ѕ5іғе 
отображает общий объем памяти, выделенной процессу 





Рис. 8.7. Команда їор, вызываемая с консоли, показывает объем памяти, 
используемой приложением, и нагрузку на центральный процессор 
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Рис. 8.8. Ргосеѕѕ ЕхрІогег предоставляет подробные сведения об использовании 
памяти и процессора каждым процессом и позволяет отслеживать особенности 
работы различных браузеров на машине под управлением \Міпаомѕ. В окне, 
приведенном на этом рисунке, отображается информация о выполнении в среде 
Моа ? ігеїох теста, олисанного в разделе 8 4.2 


Инструмент Ргосеѕѕ Ёхріоме” производства Ѕуѕіпѓегпа1.сот (рис. 8.8) часто 
в шутку называют "диспетчером задач на стероидах". Он выполняет те же 
функции, что и Таѕк Мапазег, но предоставляет подробную информацию об 
использовании памяти и центрального процессора каждым процессом. С его 
помощью мы можем, например, изучить особенности работы браузера Пцег- 
пе ЕхрІогег или Еігеѓох. 

Дж. Г. Веббер (Ј. С. М№еБбег) разработал Оир (ссылка на соответствую- 
щий ресурс приведена в конце данной главы) — простой, но мощный инстру- 
мент, ориентированный на Іпіегпеї Ехр]огег и предоставляющий информацию 
об использовании памяти. Он непосредственно запрашивает У№еБ-браузер об 
известных ему узлах ООМ, в том числе о тех, которые не связаны с деревом 
документа (рис. 8.9). 

Даже такие простые инструменты могут много сказать о состоянии вы- 
полняющегося Ајах-приложения. 

Мы рассмотрели детали и особенности, влияющие на производительность 


иные 














Рис. 8.9. Инструмент Опр предоставляет подробную информацию о внутреннем 
состоянии дерева РОМ браузера метет Ехрюгег 


отдельных фрагментов кода. Если мы напишем А} ах-приложение хотя бы 
среднего размера, различные программные решения начнут взаимодейство- 
вать друг с другом, давая подчас неожиданные результаты. В следующем 
разделе мы рассмотрим пример, подчеркивающий, насколько важно знать 
конкретные особенности выполнения кода. 


8.4.2. Простой пример управления памятью 


На данный момент вы уже имеете основные сведения об управлении памятью 
и знакомы с некоторыми подходами, упрощающими создание интерфейсных 
элементов из программы. При разработке реального приложения Ајах мы ис- 
пользуем ряд приемов, результаты применения которых могут в общем слу- 
чае влиять друг на друга. Каждое программное решение оказывает влияние 
на производительность; то же справедливо для их совместного применения- 
Результаты использования различных подходов удобно проиллюстрировать 
на конкретном примере, который мы и рассмотрим в данном разделе. 

При работе программы, рассматриваемой здесь в качестве примера, со- 
здаются и удаляются компоненты сііскВох. Они называются так потому, что 
представляют собой небольшие квадраты, реагирующие на щелчки мышью. 
Поведение каждого компонента определяется следующим кодом: 

Ғџпсііоп СііскКВох (сопіаіпег) { 
Ећ1ѕ.х=5+Маёһ. ЕТоох (Маһ. гапаот*) *370); 
Сћіѕ.у=5+Маёһ. ЕТоохг (Маєһћ.гапдотм() *370); 

Еһ1ѕ.1а= "рох" +сопёаілег-рохеѕ.1епоіһ; 
Сћіѕ.ѕёабе=0; 


еһіѕ.гепӣег (); 
сопіаіпег.ааа (ёһіѕ); 


} 


С11сКкВох .ргобобуре . гепдер= Ёцпсііоп () { 
ЕеҺіѕ.роду=пи11; 
іЕ (Еһіѕ.роду==пи11) { 
ЕҺіѕ. роду=доситепё . сгеаёбеЕ1етепі ("Ядіу"); 
еһіѕ.роду.іа=ёһіѕ.іа; 





} 
еҺіѕ.роӣу.с1аѕѕМате='рох1'; 
еҺізѕ.роду.зіу1е.1еғё=ЕҺіѕ.х+"рх"; 
еҺізѕ.роду.ѕіу1е.Еор=Еһіѕ.у+"рх"; 
еҺізѕ. роду .опс1іск= Ёцпсііоп () { 
уар с1іскрох=+һіѕ.раскіпдорюј; 
с1ііскрох.іпскетмепёЅёаёе (); 
} 
} 
С11сКкВох .ргобобуре .1пскемепе бе абе^Еопсетоп () { 
1Е (Еһіѕ.ѕбабе==0) { 
Еһіз.роду.с1аѕѕмате='рох2'! ; 
}е1зе 1Е (Еһіѕ.ѕіаёбе==1) { 
Еһіѕ.һіае{); 





} 

(61$ .зсафе++; 
} 
Сс1ісКВох.ргоіоіуре.һіде= Еџпсііоп () { 

уаг Юроа=ёһіѕ.ройу; 

боа. с1аѕѕ Мате= 'ЬохЗ' ; 





} 

Компонент СИсКВох имеет красный цвет, если отображается впервые. По- 
сле того как пользователь один раз щелкнет на нем мышью, цвет компонента 
изменяется на синий. После второго щелчка компонент удаляется с экрана. 
Данное поведение реализуется путем создания двусторонних ссылок между 
объектами модели предметной области и элементами РОМ, представляющи- 
ми их на экране. 

В программе для каждого СісКкВох поддерживается уникальный иденти- 
фикатор, информация о позиции, сведения о внутреннем состоянии (сколько 
щелчков было сделано) и тело компонента. Телом компонента является узел 
РОМ типа аіу. Узел РОМ содержит ссылку на объект модели в переменной 
раскіпеОЫј. 

В программе также определен класс Сошашег, содержащий объекты 
СПсКВох. В данном классе содержится массив компонентов и уникальный 
идентификатор самого контейнера. 

Ғопсйоп Сощашег(1а){ 

{015.14=14; 
еҺіѕ. роду=досотепё . чесЕ1етерЕвутТа (іа) 
Еһіѕ.рохеѕ=пеи Аггау(); 
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} 
Сопёаіпег.ргоёоіуре.ааа= Ғопсёіоп (рох) { 
ећіѕ.рохеѕ [.ћізѕ.рохеѕ.1епоёћ] =рох; 
еһҺіѕ.роду .аррепасһі1а (рох.роду) ; 

} 
Сопіаіпег.ргоёоёуре.с1еаг= Ёипсёіоп () { 
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Рис. 8.10. Так выглядит приложение, демонстрирующее использование памяти, после 
создания первых 100 компонентов. Компоненты реагируют на щелчки мышью 


Гог(уаг і= О; і<1һіѕ.Бохеѕ.Іепеһ;і+ +) { 
{61$.Бохез[1]|.61ае(); 


} 


Е515.Бохез^пем Аггау (); 
герогі ("с1еаг"); 
пемром$=0; 
хеозеаром$=0; 

} 

Внешний вид окна приложения показан на рис. 8.10. 

На отладочной панели, расположенной справа, отображается информа- 
ция о внутреннем состоянии системы. На состояние системы влияют события, 
например, добавление компонентов к контейнеру или их удаление. 

Данная программа была написана для того, чтобы в процессе ее работы 
можно было поэкспериментировать с созданием и удалением элементов РОМ 
и обработкой циклических ссылок. Пользователь может выбирать различные 
приемы работы с программой, устанавливая или удаляя флажки опций в 
НТМГ-форме, расположенной на странице. При активизации ссылок, управ- 
ляющих добавлением элементов в контейнер или их удалением, реализуются 
программные решения, определяемые набором установленных флажков. Рас- 
смотрим каждый из этих флажков и соответствующий ему код. 


Опция Веизе ООМ М№одеѕ 


Данная опция определяет, должен ли компонент СПсКВох при отображении 
пытаться найти существующий узел РОМ и создавать новый узел, только 
если поиск закончился неудачей. Другими словами, флажок этой опции осу- 
ществляет переключение между режимами создания при любых условиях 
и создания при отсутствии (см. раздел 8.3.2). Модифицированный код, отве- 
чающий за воспроизведение компонента, выглядит следующим образом: 


С11сКкВох .ргобобуре .хкепаек=ЕчисеЕтой () { 
еҺһіз.родӢупи11; 
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1Е (геазерОМ) { 
ећ1ѕ. роду=аосотепі .аесЕ1етепеВуТа ($1615. 1а); 
} 
1Е (651$.роау==по11) { 
еЋіз. роду=аоситепі . сгеаёсеЕ1етепі ("@1у"); 
еһіѕ.роду.іа=ёһіѕ. іа; 
ремр0М$++; 
}е1зе{ 
геоѕеаромѕ++; 
} 
еһіѕ.роду .раскіпдорј =6һіѕ; 
еҺіѕ.роду.с1аѕѕмапе='рох1'; 
еһ15ѕ.роду.ѕіу1е.1еЁё=6һҺіѕ.х+"рх"; 
еһ15ѕ.роду.ѕіу1е.Ебор=Еһ1іѕ.у+"рх"; 
еЋізѕ. роду .опс11іск= Ёџпсііоп () { 
уаг с1ііскрох=һіѕ.раскіпдорј; 
с1іскрох.іпсгепепёбіаёѓе (); 


} 








Опция Опііпк Оп Ніае 


Когда компонент СіІіскВох удаляется из контейнера (либо после второго 
щелчка мышью, либо в результате вызова Сощашег. сІеаг ()), данная опция 
определяет, должно ли производиться удаление путем сокрытия или удале- 
ние путем отсоединения. Об этих принципах удаления см. в разделе 8.3.2. 
СПіскВох.ргоѓоїуре.Шіае=ѓипсііоп(){ 

уаг Боа=+һіѕ.боау; 

Боа.сІаѕѕ$ Мате= Ъох3'; 

і? (опіпкОпНійе){ 

Бо4.рагеп Моде.гетоуе СВ а(Ъоа}; 


/ 


Опция Вгеак Сусйс Веѓегепсеѕ 


Данная опция также имеет отношение к процессу удаления компонента 
СПсКВох. Она определяет, должны ли присваиваться значения пи свой- 
ствам элемента РОМ и объекта модели предметной области, т.е. должны ли 
удаляться циклические ссылки. 


СПіскВох.ргоѓоѓуре.ћіае=ѓипсііоп()! 
уаг Боа=1һіѕ.боаӣу; 
боа, сІаѕѕ$ Мате= Бох3' ; 
і? (опіпкОпНіае)! 
Ббоа.рагепіХоае.гетоуеСһіа(боа); 


} 
іе {ргеакСусіісѕ){ 
боа.БаскіпеОбј= пи; 
1һіѕ.роау=пиі; 
І 


Управляющие элементы формы позволяют пользователю помещать 
з контейнер новые компоненты СПсКВохез и очищать контейнер. Приложе- 
нием можно управлять вручную, но для удобства сбора результатов мы напи- 
сали также тестирующую функцию, которая имитирует некоторые действия 
пользователя. Приведенная ниже последовательность действий повторяется 
240 раз. 


1. Включение 100 компонентов в контейнер с помощью функции рори- 
1афе (). 


2. Добавление 100 компонентов. 
3. Очистка контейнера. 


Код функции ѕігеѕѕ Теѕі() приведен ниже. 
Ғопсбоп зѕігеѕѕ Теѕїі() { 
Гог (уаг 1=0;1<240;1++){ 
роршаїе (100); 
роршаїѓе(100); 
сопѓаіпег.сІеаг(); 


аІегі("аопе"); 


Заметьте, что в данном случае проверяется добавление компонентов 
к контейнеру и удаление их, а не поведение элементов СісКВох по щелч- 
ку мышью. 

Данная проверка умышленно упрощена. Если вам надо лишь выяснить, 
увеличивается или уменьшается объем потребляемой памяти при изменении 
алгоритма, мы рекомендуем создавать для ваших приложений такие же про- 
стые тесты. Создание тестовых сценариев уже само по себе требует опреде- 
ленного мастерства, в частности, от разработчика требуется знание типичных 
приемов проектирования. 

Выполнение тестового сценария занимает около минуты. В течение этого 
времени браузер не реагирует на действия пользователя. Если число итера- 
ций выбрать слишком большим, браузер может "зависнуть" на длительное 
время. Если число повторений мало, изменения потребляемой памяти не бу- 
дут заметны. Мы выбрали 240 итераций и считаем, что для нашей машины 
это вполне приемлемое значение. Вы же можете изменить его, исходя из кон- 
кретных условий. 

Запись изменения занимаемой памяти — сравнительно простая задача. 
Мы выполняем тестирование в операционной системе УМш4о\$ при работаю- 
щей программе ТазК Мапарег. Объем потребляемой памяти регистрируется 
непосредственно после загрузки тестовой страницы, а затем снова после вы- 
вода окна, сообщающего о том, что тестирование завершено. В системе Опіх 
для тестирования может быть использована утилита {ор или другой инстру- 
мент аналогичного назначения (см. раздел 8.4.1). После каждой проверки мы 
закрываем браузер, чтобы обеспечить равные условия тестирования. 


Таблица 8.4. Результаты тестирования 


Идентификатор Флажок Веџѕе Флажок Опііпк Флажок Вгеак Занимаемая память 


ром Моаеѕ Оп Ніае Сусііс после окончания 
Веѓегепсеѕ работы (Іпіегпеї 
ЕхріІогег) 
А Сброшен Сброшен Сброшен 166 Мбайт 
В Сброшен Сброшен Установлен 84,5 Мбайт 
С Сброшен Установлен Сброшен 428 Мбайт 
р Установлен Сброшен Сброшен 14,9 Мбайт 
Е Установлен Сброшен Установлен 14,6 Мбайт 
Е Установлен Установлен Сброшен 574 Мбайт 
Є Установлен Установлен Установлен 14,2 Мбайт 


Такова методология проверки. В следующем разделе мы обсудим ее ре- 
зультаты. 


8.4.3. Как уменьшить объем используемой памяти в 150 раз 


Выполняя тестирование и пользуясь данными, предоставляемыми Міпаомѕ 
Таѕк Мапазег, можно сделать вывод о том, что объем используемой памяти 
зависит от алгоритмов, выбранных посредством флажков опций. Результаты 
проверки приведены в табл. 8.4. 

Тестирование производилось на рабочей станции с тактовой частотой про- 
цессора 2,8 ГГци 1 Гбайт оперативной памяти, работающей под управлением 
операционной системы Міпаоуѕ 2000 Могкѕќайоп. В качестве браузера был 
выбран Пицегпеё ЕхріІогег 6. Во всех случаях начальное потребление памяти 
составляло приблизительно 11,5 Мбайт. Информация об использовании па- 
мяти отображалась в столбце Меп Чзазе на вкладке Ргосеѕѕеѕ программы 
Таѕк Мапазег (см. раздел 8.4.1). 

Поскольку мы сопоставляем реальные значения, следует заметить, что 
само приложение занимает достаточно много памяти. Ајах-программы счи- 
таются "тонкими" клиентами, однако при определенных ошибках в коде или 
их сочетании они могут потреблять невероятно много памяти. 

Необходимо также заметить, что выбор конкретных программных реше- 
ний оказывает огромное влияние на объем занимаемой памяти. Рассмотрим 
результаты более подробно. При трех сочетаниях флажков опций после отоб- 
ражения и удаления всех компонентов сИсКВох объем памяти оказывался 
менее 15 Мбайт. При остальных наборах опций это значение возрастало до 
80, 160 и даже до 430 и 580 Мбайт. Учитывая, что сам браузер потребля- 
ет 11,5 Мбайт памяти, размер дополнительно использованной памяти лежал 
в пределах от 3,5 до 570 Мбайт, т.е. мы можем сократить его в 150 раз, пра- 
вильно выбрав программные решения. Стоит также отметить, что браузер 
продолжал функционировать при любой утечке памяти. 
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Ни один из алгоритмов нельзя признать виновником происходящего. 
у[ежду ними существует очень сложная взаимозависимость. Сравнивая, на- 
пример, проверки А, Ю и Е, мы видим, что переключение значения опции 
Веџѕе ПОМ Моаеѕ дает огромную экономию памяти {больше 90%), в то же 
время переключение ОпПиКкК Оп Ніде приводит к тройному увеличению ее по- 
хребления. В данном конкретном случае причины происходящего понятны — 
поскольку связи для узлов рОМ разрываются, они не могут быть найде- 
ны путем вызова аосите .веїЕІетепіВу1а4(), следовательно, их невозмож- 
но использовать повторно. Аналогично, изменение значения опции ОпііпКк оп 
Ніде приводит к увеличению потребления памяти по сравнению с исходной 
конфигурацией (проверки С и А). Перед тем как объявлять опцию Опііпк 
оп Не виновницей излишнего расхода памяти, сравним проверки Еи С — 
в правильном контексте она дает некоторый положительный результат. 


Интересно отметить, что в этом "состязании" нет победителя: три совер- 
шенно различные комбинации значений опций дают лишь незначительное 
различие в объеме потребляемой памяти. Во всех трех случаях установлен 
флажок Кеџѕе ПОМ Моаеѕ, но эта же опция в другом сочетании приводит к 
максимальному расходу памяти. Однозначного вывода из имеющихся резуль- 
татов сделать нельзя, но мы можем выделить сочетания алгоритмов, которые 
дают хорошие результаты, и другие наборы, которые использовать не следу- 
ет. Если мы проанализируем программные решения и дадим им имена, будет 
значительно проще применять их при работе над приложением для полу- 
чения приемлемых результатов. Если мы не будем использовать фиксиро- 
ванный набор программных решений, а будем по наитию создавать каждую 
подсистему, работающую с РОМ, каждый новый фрагмент кода будет давать 
непредсказуемые результаты: возможно, его выполнение приведет к значи- 
тельному расходованию памяти, а может быть, он будет работать достаточно 
экономно. 


В ходе подобных проверок разработчик получает информацию, позволя- 
ющую решить многие вопросы, связанные с разработкой богатых ОНТМГ- 
клиентов, выполняющихся в среде браузера в течение длительного времени, 
и выявить ряд ошибок. 

Чтобы реально контролировать вопросы, связанные с использованием па- 
мяти, надо помнить о них в процессе разработки. Модифицируя код, полез- 
но подумать о том, как эти изменения скажутся на использовании памяти. 
Кроме того, после внесения изменений всегда надо проверять, как память 
используется программой. 


Несмотря на то что стандартные программные решения помогают в раз- 
работке, проблемы с памятью вновь могут возникнуть при незначительном 
изменении условий. Так, например, мы знаем, что алгоритм устранения цик- 
лических ссылок может давать неожиданные результаты, взаимодействуя 
с решением, которое предполагает создание узлов лишь в случае их отсут- 
СТВИЯ. Детально представляя себе суть того или иного программного реше- 
ния, вы уменьшаете вероятность возникновения нежелательных последствий. 


Использование типичных программных решений упрощает задачу созда- 
ния тестовых сценариев. Написание программ или сценариев для тестирова- 
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ния, наверное, самая сложная часть работы, поскольку для ее выполнений 
надо знать, как пользователь будет взаимодействовать с приложением. Не 
исключено, что программа будет предназначена для нескольких категорий 
пользователей; в этом случае придется разработать несколько тестирующих 
сценариев. Используя одну программу, имитирующую некоего усредненного 
пользовааеля. можно упустить из виду важные детали, оказывающие суще- 
ственное влияние на результаты работы. И наконец, готовую программу про- 
верки нельзя рассматривать как нечто неизменное. При модификации при- 
ложения вполне может потребоваться внесение изменений в сценарий тести- 
рования. 


8.5. Резюме 


Производительность любой компьютерной программы в основном определя- 
ется скоростью ее выполнения и объемом потребляемой памяти. В случае 
приложения Ајах мы имеем дело со специальной средой, имеющей мало об- 
щего с операционной системой и, тем более, с аппаратным обеспечением. Тем 
не менее, выбирая то или иное программное решение, мы можем существенно 
влиять на производительность программы. 

Мы рассмотрели вопросы профилирования, причем использовали для со- 
здания профилей как библиотеки Лауа$ст!р®, так и встроенные инструменты, 
например отладчик Уепктап. Профилирование позволяет нам выявить узкие 
места системы, а также определить исходные точки отсчета для оценки влия- 
ния вносимых изменений. Сравнивая результаты профилирования до и после 
модификации кода, мы можем оценить влияние внесенных изменений на ра- 
боту программы. 

Мы также рассмотрели вопросы управления памятью и показали, как 
можно избежать утечки памяти при работе программы. При этом было уде- 
лено внимание как универсальным решениям, так и подходам, ориентиро- 
ванным на конкретные обстоятельства, например, использованию структуры 
РОМ или работе с Іпіегпеї ЕхріІогег.,Вы научились определять объемы па- 
мяти, потребляемой приложением, используя для этой цели инструменты, 
ориентированные на операционные системы УМтао\ и Чшмх. 

И наконец, мы рассмотрели пример, демонстрирующий важность приня- 
тия тех или иных решений при написании программы. Программные реше- 
ния, примененные при разработке приложения, могут существенно влиять на 
потребление памяти и возхможность управления ею. 

Работая над повышением производительности программы, никогда нель- 
зя утверждать, что конечная цель достигнута, — на каждом этапе рабо- 
ты остается возможность некоторой оптимизации кода. Поэтому, оптимизи- 
руя Ајах-приложение, важно вовремя сказать "достаточно" и не затрачивать 
большие усилия на получение скромных результатов. Для того чтобы при- 
нять решение об окончании работы по оптимизации, необходима информация 
о реальной производительности программы. В данной главе были рассмотре- 
ны инструменты, способные предоставить эту информацию разработчику. 
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8^6. Ресурсы 


0 данной главе мы рассмотрели несколько инструментов. 


• "гір, детектор утечки памяти, разработанный Джоэлом Веббером (Јое1 
УеБбег) и ориентированный на Іпіегпеѓ Ехр]огег. Этот продукт доступен 
по адресу ВИр://м\\. оо Папме!.сош/1е1еаК/. 


• Профилировщик УепКктап (ВИр://\м\\. зуеп ое. сот/соде/1еаги!п; 
_уепкКтап/аауапсечд). 


• Ргосеѕѕ ЕхрІогег (ВИр://\м\м\.зуз1щегпа!$.сот). 


Официальная информация о проблемах использован ш памяти бра- 
узером Пиегпеё Ехр!огег и путях их устранения представлена по ад- 
ресу Һһіїр:// тѕап.тісгоѕоѓї. сот /1ібгагу/аеѓаиц1.аѕр?иг1 = /1іБгагу/еп- 
иѕ ЛЕТесћСо1І/апмебвеп/іе Іеак_ раЦегп$ .аѕр. Сведения о решениях, пред- 
ложенных Ричардом Корнфордом (Кісһага Согпѓога), можно получить, осу- 
ществив поиск посредством Сбооѕ1е Стгопр$. В качестве ключевых слов на- 
до указать согпѓога јауаѕсгірі ѓіхСігсІеКеѓ $ () (полный ЧВГ слишком 
длинный, чтобы приводить его здесь). 


Часть ІУ 


Ајах в примерах 


Х? данной части приводится пять завершенных проектов Ајах, демонстри- 
рующих весь процесс создания неотразимых интерактивных элементов для 
вашего М№еБЬ-приложения. В каждом случае мы последовательно разберем код 
одного примера и покажем, как он работает. Затем реструктуризируем код, 
чтобы вы могли использовать его в собственных проектах. Предлагаемые 
примеры охватывают весь спектр действий, доступных при использовании 
Ајах: от улучшения элементов форм до разработки завершенных порталов, 
сообщающихся как с вашими серверными процессами, так и со стандартными 
службами Интернета. При реализации кода серверной стороны мы специаль- 
но задействовали смесь популярных языков программирования, поэтому в 
данном разделе вам встретятся РНР, Јауа, УВ.Ме и СЯ. В коле, который 
можно загрузить с М№еб-сайта данной книги, представлено несколько реали- 
заций серверного кода, разобранного в данной главе. Не скучайте! 







Динамические 


В этой главе... 


Клиентский код Јауа$Ѕсгірі 

Серверный код УВ.МЕТ 

Формат обмена данными 

Реструктуризация для повторного использования 
Динамические окна выбора 
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Если вы когда-либо покупали рубашку в интерактивном магазине, то мог-Я 
ли столкнуться со следующей проблемой. Вы выбираете размер рубашки из 
раскрывающегося списка, а из следующего списка выбираете ее цвет. Затем 
вы отправляете заполненную форму и получаете сообщение "Товара нет на 
складе", написанное гигантскими буквами. С чувством глубокого разочаро- 
вания вы щелкаете на кнопке Назад или на предложенной ссылке, а затем 
выбираете новый цвет. 

Используя Ајах, подобного срыва планов можно избежать. Например 
списки выбора можно связать так, чтобы, когда пользователь выберет раз- 
мер из первого списка, во второй список непосредственно из базы данных 
выводились все имеющиеся в наличии расцветки рубашек данного размера 
(при этом от пользователя не требуется обновлять страницу). Ранее связыва- 
ние нескольких списков выбора для выполнения указанной задачи требовало 
интенсивного кодирования на ЈауаЅсгірі с использованием массивов или до-1 
полнительной обработки на сервере, но теперь есть лучший способ, который 
предлагает Адах. 


9.1. Сценарий двойной комбинации 


В двойных связных списках содержимое одного списка зависит от варианта, 
выбранного в другом списке. Когда пользователь выбирает значение из пер- 
вого списка, все элементы второго динамически обновляются. Обычно подоб- 
ная схема называется сценарием двойной комбинации (оч е-сотбо ѕсгірї). \ 

Существуют два традиционных решения проблемы динамического запол- 
нения второго списка: одно реализуется на стороне клиента, второе — на 
сервере. Напомним их, чтобы понять принцип их действия и вопросы, свя- 
занные с ними. 


9. 1, 1. Недостатки клиентского решения 


Традиционно первое, о чем думают разработчики, — это использовать реше- 
ние, переносящее всю работу на сторону клиента. В подобном решении, осно- 
ванном на ЈауаЅсгірі, значения списка жестко кодируются на Уе-странице 
в массивах Јауа$сгірі. После того как вы выбрали размер рубашки, сценарий 
заполняет следующий список, выбирая значения из массива. Данное решение 
показано на рис. 9.1. 

С данным клиентским методом связана одна проблема: поскольку поль- 
зователь не связывается с сервером, на момент первого выбора массив мо- 
жет оказаться устаревшим. Другую проблему составляет время загрузки 
исходной страницы, на которое очень сильно влияет количество позиций 
в обоих списках. Представьте себе магазин с тысячей предметов; в массив 
Јауа8сгірі необходимо поместить цену каждой вещи. Поскольку код, пред- 
ставляющий данный массив, будет частью страницы, пользователю придется 
довольно долго ждать первой загрузки сайта (пользователь никак не может 
заблаговременно получить данную информацию). С другой стороны, метод 
ЈауаЅсгірі имеет и одно преимущество: после первой загрузки все происхо- 
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рис. 9.1. Клиентское решение 
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дит достаточно быстро. Никакой заметной задержки между выбором позиции 
первого списка и появлением второго не наблюдается. Таким образом, дан- 
ный метод подходит только в том случае, если требуется реализовать лишь 
несколько связных списков, которые не очень сильно повлияют на время за- 
грузки страницы. 


9.1.2. Недостатки клиентского решения 


Следующее традиционное решение заключается в возврате формы на сервер 
Для дообработки. В данном методе обработчик событий опсћһапве в первом 
списке инициирует возврат страницы на сервер с помощью метода заб ти (), 
введенного в ЈауаЅсгірі-представление формы. В результате страница отправ- 
ляется на сервер, донося выбранный пользователем элемент первого списка. 
Сервер, в свою очередь, запрашивает базу данных согласно значению, кото- 
рое выбрал пользователь, и динамически заполняет второй список новыми 
значениями, вызывая повторное отображение страницы. Действия данного 
серверного метода представлены на рис. 9.2. 

Недостатком описанного серверного метода является число обращений 
к серверу; при каждой перезагрузке страницы наблюдается задержка, вы- 
званная необходимостью копирования по сети всей страницы. Визуально дан- 
ная структура выглядит так, как показано на рис. 9.2. Кроме того, на сто- 
роне сервера необходимо реализовать дополнительный код, отвечающий за 
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Рис. 9.4. Архитектура клиентской части приложения с показанной инфраструктурой Ајах 
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первого списка ѕеіесї Ѕоифагт 





9.2. Архитектура клиента 





Большинство разработчиков, обычно занимающихся написанием кода для 
сервера, практически ничего не знают об архитектуре клиента. В нашем слу- 
чае все не так страшно, поскольку нам требуется лишь несколько действий, 
позволяющих занести ряд позиций во второй список. Если вам уже приходи- 
лось реализовывать описанные выше комбинированные списки (с использо- 
ванием ЈауаЅсгірі или серверного подхода), то вы уже примерно знаете, с чем 
вам придется столкнуться. 

Как видно на рис. 9.4, взаимодействие данного приложения со сторо- 
ной клиента проходит в три этапа. Первый этап — это построение исходной 
формы. Затем пользователь выбирает элемент из первого списка ѕе1есі. На 
втором этапе требуется создать объект ХМЕНИрКеаие$, взаимодействующий 
с сервером. Этот объект передает выбор пользователя серверу вместе с име- 
нами формы и элементами управления, которые будут обновлены при полу- 
чении отклика сервера. Третий этап — это добавление содержимого ХМГ- 
отклика сервера ко второму элементу ѕе1есї. Для разбора ХМІ -отклика ис- 
пользуются методы РОМ ХМГ, реализованные на Јауа$сгірі. 

Сейчас мы разберем первые два этапа, которые выполняются до отправ- 
ки запроса Ајах серверу. Третий этап (взаимодействие РОМ с документом 
ХМЕ-отклика сервера) мы подробно разберем в разделе 9.4, поскольку, пе- 
ред тем, как завершить реализацию архитектуры клиента, нам нужно будет 
поговорить о сервере. 


9.2.1. Разработка формы 


В данном примере форма содержит два элемента ѕе1есі. Изначально пер- 
вый из них хранит значения, а второй список пуст. Внешний вид полученной 
формы показан на рис. 9.5. 


Таблица9.1. Три способа заполнения элемента формы 





Метод Преимущества Недостатки 
Жестко закодировать значения Не требует обработки на Опции не могут быть 
в элементе ѕеіесії стороне сервера динамическими 
Заполнить значения, используя е 
сценарий серверной части Опции могут быть Требует дополнительной 
приложения динамическими и обработки на сервере 
заполняться из базы 
данных 








Использовать Ајах для 

заполнения формы значениями; Можно связать с другими Требует дополнительной 
для извлечения значений значениями на странице обработки на сервере 
требуется дообработка на 

сервере 


Как показано в табл. 9.1, первый элемент формы можно заполнить тремя 
различными способами. 

Первый метод — жестко закодировать значения в элементе ѕе1есі. Дан- 
ный метод хорош, когда вы используете несколько опций, которые не будут 
меняться. Второй метод — заполнить значения, используя сценарий сервер- 
ной части приложения. При таком подходе опции заполняются при визуа- 
лизации страницы, что позволяет извлекать их из базы данных или файла 
ХМГ. Третий метод — использовать для заполнения значений инфраструк- 
туру Ајах; этот метод требует дообработки на сервере (извлечения значений), 
но не требует повторной визуализации всей страницы. 

В данном примере мы жестко закодируем значения в списке, поскольку 
используется всего четыре опции, которые не являются динамическими. Наи- 
более удачным решением задачи динамической загрузки значений в первый 
список является использование серверного сценария, заполняющего список 
в процессе визуализации страницу. В данном случае для заполнения пер- 
вого списка Ајах использовать не стоит (если только содержимое списка не 
зависит от других значений, выбранных пользователем в форме). 

Как показано в листинге 9.1, первый список должен содержать обработ- 
чик событий опсһапее, добавленный к элементу зе|ес{. Этот обработчик 
событий вызывает функцию ЕіПТеггіїогуО (ЈауаЅсгірі), которая иниции- 
рует процесс заполнения второго списка, отправляя запрос серверу. 


Листинг 9.1. Форма со связными списками НННННИНВИНН 


<Еоги паме="Роги1"> <зе1есЕ папе="9а1Ведтоп" 

опсһапде= "Ғі11Теггііогу (6615$ ,Чосимере.Роги1.Я991Текк1еохку) "> 
<орёіоп уа1џе="-1">Ріск А Ведіоп</орёіоп> 
<орёіоп уа1оџе= "1" >Еаѕіегп</орііоп> 
<орііоп уа1џе= "2 ">Иеѕёегп</орііоп> 
<орёіоп уа1пџе- "3 ">Могіћегп</орііоп> 
<орііоп уа1џе= "4" >боџіћегп</орііоп> 

</ѕеіесі> <зе1есЕ папе="Яад1Теггіёогу"></ѕе1есё> </ Ёогт> 
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Код, приведенный в листинге 9.1, создает форму, инициирующую процесс 
ИПТеггЦогу{) при выборе элемента из первого списка. Функции ЕШТег- 
1-ЦогуО мы передаем две объектные ссылки на элемент. Первая из них — 
объект списка, к которому прикреплен обработчик событий, вторая — спи- 
сок, который требуется заполнить. Далее нам необходимо разработать код 
серверной части приложения для Е!ШТеггИоту (), который бы отправлял 
„аш запрос серверу. 


9.2.2. Разработка взаимодействия клиент/сервер 


Основной целью функции Еі1Теггіїогу () является сбор информации, необ- 
ходимой для отправки запроса серверу. Эта информация включает выбран- 
ную опцию из первого списка, имя формы и имя второго списка. Имея 
эти данные, мы можем использовать функции Ајах в нашей библиотеке 
ЈауаЅсгірі для отправки запроса серверу. Итак, первое, что требуется сде- 
лать, — это реализовать функциональные возможности Ајах. Код, требуемый 
для связи с внешним файлом ЈауаЅсгірї пе{.] ѕ (определяет объект Сопїѓепі- 
Гоааег), тривиален. Все, что требуется, — добавить приведенную ниже стро- 
ку между дескрипторами заголовка вашего документа НТМГ. 


<ѕсгірі ёуре="ехі/јауаѕсгірі" ѕгс="пеї.јѕ"х/ѕсгірі> 


Объект Сощеп оа4ег выполняет всю работу, определяя, как отправить 
запрос серверу, скрывая при этом весь код (зависящий от используемого бра- 
узера) в удобном интерфейсном объекте, который мы ввели в главе 3. Это 
позволяет обмениваться данными с сервером, не обновляя страницу. 

Добавив функциональные возможности Ајах, мы сможем построить 
функцию Е!ШТеггИогуО, показанную в листинге 9.2; данный код также 
включается в заголовок нашего документа. 


Листинг 9.2. Функция ЕИ!ТеггКогу Ц инициализирует запрос Ајах 
<ѕсгірі ёуре= "бех /јауаѕсгірё"> 
Ғопсёіоп Рі11Теггііогу (оЕ1ем,©Тагдеб) { 
// О Получить значение, выбранное в списке 
уаг ѕіёгуүаіцџе = оЕ1етм.орііопѕ[ 
оЕ1ем.зе1есееЯ1таех] .уа1ае; 
// © Установить целевой ОВ 
уаг цгі = "РопбТеСопйохмЬ.азрх"; 
// © Построить строку параметров 
уаг зЕгРагашз = "а=" + ѕігҮуаіпе + 
"&Е=" + ОТахкдебе.Еогм.пашще + 
"&е=" + оТагдее .папе; 
// О Инициализировать загрузчик содержимого 
уаг 1Іоадегі = пем 
пее.СопсепЕГоааекг (џг1,Еі11ргорроип,пи11, 
"РОСТ" ‚ зеЕгРакамз); 























База данных | 


ЕА. 


Отправленная Динамический Создание Возврат 
форма Зог ХМЕ-документа документа 


Рис. 9.6. Поток процесса на стороне сервера 


Функция ЕіПТеггіогу () принимает два параметра, в данном случае 
передаваемые от обработчика событий опсһапее из первого списка. Эти па- 
раметры — ссылки на первый и второй элементы $е]ес{ О. Мы обраща- 
емся к значению, которое пользователь выбрал в первом списке ®, и уста- 
навливаем ОКІ, целевого серверного сценария ©. Далее мы создаем пара- 
метры, которые будут отправлены серверу: формируем строку с таким же 
синтаксисом, как и строка запроса, используя амперсанд для разделения пар 
"имя-значение". В данном примере мы отправляем значение, представляю- 
щее выбранную область, как 9, имя формы —- как №, а имя второго элемента 
ѕеіесї — как е. Серверная часть кода использует значение выбранной обла- 
сти для запроса базы данных и отправит имена формы и элемента ѕе1есї 
клиенту в ответном документе ХМГ. С помощью этой информации клиент 
определит, какую форму и элемент управления обновить. Создав строку па- 
раметров, остается только инициировать процесс Адах. 

Чтобы начать процесс О, мы вызываем конструктор Сощеп оа4егО 
и передаем целевой ЧВГ, функцию, вызываемую при получении отклика 
сервера, функцию обработки ошибок, используемый метод НТТР и отправ- 
ляемые параметры. В данном случае при возврате данных с сервера будет 
вызываться функция ЕШОторОомт (), в качестве функции обработки ошибок 
устанавливается функция, по умолчанию принятая Соп(еп .оааег, кроме то- 
го, мы используем запрос РОЗТ. 

В это время Сощмеп оадег ожидает возврата от сервера документа ХМІ* 
Мы продолжим разбор клиентской части кода в разделе 9.4, а пока изучим, 
что должен сейчас сделать сервер. 


9.3. Реализация сервера: УВ.МЕТ 


В коде серверной части приложения необходимо реализовать извлечение тер- 
риторий, принадлежащих к выбранной клиентом области, из базы данных 
и возврат их клиенту в документе ХМГ. Согласно набору элементов, полу- 
ченных из запроса ЗОГ, создается документ ХМГ, который и возвращается 
клиенту. Поток процесса на стороне сервера показан на рис. 9.6. 

Код на стороне сервера активизируется запросом объекта Сощеп(Гоа4ег 
со стороны клиента. Вначале код сервера извлекает значение параметра за- 
проса а, представляющего выбранную область. Согласно значению а созда- 
ется динамический запрос ЗОГ, который, обращаясь к базе данных, находит 
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пары "текст-значение" для второго раскрывающегося списка. Затем данные, 
полученные из базы данных в ответ на запрос, форматируются в форма- 
те ХМГ и возвращаются клиенту. Прежде чем написать код, выполняющий 
описанные действия, нам необходимо определить основную структуру доку- 
мента ХМГ. 


9.3.1- Определение формата ХМІ-отеета 


Нам требуется создать простой документ ХМГ, возвращающий клиенту ре- 
зультаты нашего запроса к базе данных. Этот документ будет содержать оп- 
ции, которыми будет заполняться второй список. Для представления каждой 
опции требуются два элемента: один, содержащий текст опции, второй — 
ее значение. 

Документ ХМІ. в нашем примере содержит корневой элемент зе- 
Іесісһоісе, вмещающий единственный элемент ѕеІесіЕ1Іетепі, за которым 
следует один или несколько элементов епігу. Элемент ѕеіесіЕ1етепі содер- 
жит имена формы НТМІ из раскрывающегося списка, который будет запол- 
нен результатами, полученными из базы данных. Каждый элемент епігу со- 
держит два дочерних элемента, орііопТехі и орНоп\Уаше, которые вмещают 
значения, представляющие описание и идентификатор каждой территории. 
Описанная структура показана в листинге 9.3. 


Листинг 9.3. Пример формата ХМЕ-ответа 
<?хті уег$10п="1.0" ?> 
<зеес(Сво1се> 
<ѕеІіесіЕІетепі> 
<оптате>Ғогті< Хогпт\ћате> 
<ҒогтЕІет>ааїТетгіќогу</ҒогтЕіет> 
</ѕеІесіЕІетепі> 
<епту> 
<орйопТехі>8е1есі А Тетгіѓоту</оріопТехі> 
<орйопУ\Уаше>-1</орНопУ\Уаше> 
</епітгу> 
<епіту> 
<оріопТехі>Теттіѓогу Оеѕсгіріоп</оріопТехі> 
<оріопУаиое>Тетгіѓоту[0< /орНоп\УаШше> 
</епіту2> 
< /ѕеіесіСһоісе> м 





Изучая пример документа ХМІ. в листинге 9.3, обратите внимание на на- 
личие позиции, содержащей текст опции "ЅеІесі А ТеггИогу" ("Выберите тер- 
риторию"). Это первая опция, отображаемая в списке, она предлагает пользо- 
вателю выбрать значение. Код сервера включает это значение в начало каж- 
дого ответного документа до получения динамических опций из базы данных. 

Теперь, определив ответный документ, можно писать код, динамически 
создающий ХМГ-документ и возвращающий его клиенту. 


.358 Часть М. Ајах в примерах 


9.3.2. Написание кода сервера 


Код УВ.МЕТ серверной части приложения достаточно прямолинеен. Мы за- 
прашиваем базу данных, которая возвращает набор записей. После этого мы 
циклически проходим по набору записей и создаем ХМГ-документ, который 
затем возвращаем клиенту. Если мы не найдем ни одной записи, тогда эле- 
менты епгу не создаются и статическая опция "ЅеІесі А Тегйогу" опуска- 
ется. Как показано в листинге 9.4, серверная часть кода не очень сложна. 
Она просто содержит операторы, извлекающие значения формы, отправлен- 


ные на сервер, устанавливает тип содержимого, выполняет поиск и выдает 
документ ХМІ. 


В приведенном примере использована база данных М№Могіћуіпа из 801. 
Зегуег (МИсгозой). 


Листинг 9.4. роиџбіеСопірохмі.аѕрх. м6: создание ХМІ-ответа на сервере^ 
// Реализация метода Раде_Тоаа 
Ргіуаёсе боб Раде Іоаа( _ 
ВуУа1 зепаег Аз бЅуѕёетм.Орјесё, 
Вууа1 е Аз бЅуѕіет.ЕуепЕАгоѕ) 
Напа1еѕ МуВаѕе.Іоаа 
// О Установить тип содержимого 
Кеѕропѕе.СопіепёТуре = "бех /хті" 
// © Извлечь отправленные данные 
Р1м зегОчеку Аз Ѕігіпо 
зЕгОцегу • Веачезе.ЕКоги ("а") 
Рим зсуРогш Аз гіпо 
зЕгРогм *= Веааезе.Кохгм ("Е") \ у, 
Р1м эзехЕ1ем Аз 5Егіпд 
ѕігЕ1ет = Веадезе.РЕогм ("е") 
// © Создать утверждение 501 
Р1т ѕёгѕді Аз ЭЕглиа = "ЅЕІЕСТ " & 
"Теггііогуреѕсгірііоп, " & 
Геггііогу1р" & _ 
" ЕВОМ Теггібогіеѕ" & __ 
" МНЕВЕ гесдіопіа = " & _ 
ѕігОцџегу & " ОБОЕВ ВУ " & _ 
"Теггіёогуреѕсгірі1іоп" 
Р1м асОрёіопѕ Аз раёаТар1е 
// О Выполнить утверждение $01 
асОрііопѕ = Е111РабаТа Те (зігѕа1) 
// © Начать документ ХМІ, 
Р1м зЕухХМЬ Аз ЅЕгіпдВиі1аег 




















ип 

















зЕУХМЬ = Мем ЅігіпоВиі1аег ("<?хи1 " & _ 
"уегстоп=" "1.0" Ш ?>") 
ЕУХМЬ .Аррепа { "<зе1есеСВо1се>") 








А 
ѕЕГХМІ,. Аррепа ("<ѕе1есёЕЕ1Іетепі>") 
ѕзЕГХМІ,. Аррепа ("<ЕогиМаме>" & _ 
зЕуРогм & 





























"</ Еогпматме>") 
ѕЗЕГХМІ,. Аррепа (" <ҒогтЕ1еть" & _ 
ѕЕгЕ1Іетм & 
"</ЕогиЕТет>") 
ѕЕГХМІ,. Аррепа ("</зе1есеЕ1етепе>") 
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/ / О Проверить наличие результатов 

ТЕ асОрііопѕ.Вомѕ.Соопё > 0 Тһеп 
/ / в Добавить первый элемент выбора 
ѕЕЕХМІ.. Аррепа ("<епігу>") 
ѕЕГХМІ,.Аррепа{ "<орёіопТехі>" & _ 
"бе1есі А Теггііогу" & _ 
"</орЕіопТехё>") 
ѕЕЕХМІ,. Аррепа ("<орёіопУа1џе>-1" & _ 
"</орЕ1опУа1ае>") 
ѕЕЕХМІ.. Аррепа ("</епігу>") 
// © Циклически пройти по набору результатов и добавить элементы ХМІ, 














Р1и гот Аз ПБабаВом 

Еог Еасһ ком Іп асОрііопѕ.Коиѕ 
ѕЕЕХМІ.. Аррепа ("<епігу>") 

ѕЕЕХМІ,. Аррепа ("<орііопТехі:>" & __ 

гот ("Теггіёогуреѕсгірііоп") & 
"</оріЕіопТехі>") 

ЗЕЕХМГ .Аррепа ("<орііопуа1џе>" & _ 
гои ("ТеггііогуІр") & _ 








"</орёіопуа1пое>") 
ѕЕГХМІ,.. Аррепа. ("</епігу»>") 
МехЕ 
Епа ТЕ 


// © Вернуть документ ХМІ 
Е кХМЬ .Аррепа ("</ѕе1есЕСһоісе>") 
Везропзе. Мите (5ЕгХМІ,. ТоѕЅіЕгіпд) 
Епа ба 
Роир1іс ЕапсЕ1ой Рі11раёаТар1е( _ 
Вууа1 за1Оцегу Аз бігіпд) 
Аз РасаТа Ле 
Р1м ѕёкСопп Аз Ѕёгіпд = _ 
"Іпіёіа1 Саёа1о9 - МохЕБмата; " Еі _ 
"Раба Ѕоџгсе=127.0.0.1; " & _ 
"Іпсесдгаёсеа бЅесогіёу=ігие; " 
Грім спа Аз _ 
Мем 591С11іепі .5Ѕа1раёсададаріег { ѕа10иегу, 
ѕігСопп) 




















Оп ааѓаЅеїІ Аз №№ ПРаїаЅеї 
ста1. Еі (ааѓаЅеї1) 
стаі. Оіѕроѕе() 
Кеїигп ЯаїѓаЅеі1.ТаЫь1еѕ(О) 
Епа Еипсііоп . 


Установив тип содержимого страницы О равным ({ехё/хт|, мы гаран- 
тируем, что ХМІНіќрКедиеѕї правильно разберет отклик сервера на сто- 
роне клиента. 

Из параметров запроса ©, полученных от клиента, мы получаем значение 
выбранной области, имя формы НТМЕ и имя элемента. Чтобы лишний раз 
перестраховаться, мы можем добавить в этом месте проверку, гарантирую- 
щую, что данные значения не пустые. Если в ходе проверки не будет найдено 
хотя бы одно требуемое значение, сценарий может возвращать сообщение 
об ошибке. Кроме того, прежде чем приложение войдет в производственную 


среду, мы также должны проверить возможность атаки через внедрение 5 Ое 
кода. Это защитит базу данных от злоумышленных запросов. 

Получив значение выбранной области, необходимо сгенерировать строку 
ОГ, чтобы мы могли извлечь из базы данных соответствующие территории 
©. Нас интересуют два столбца: Тетггііогу Оеѕсгірііоп и ТеггИогу! из таб- 
лицы ТеггИог1ез базы данных. Значение области мы вводим в условие УНЕВЕ 
выражения 501. Чтобы гарантировать, что в создаваемом списке результаты 
будут идти в алфавитном порядке, мы дополнительно устанавливаем, усло- 
вие ОКОЕК ВУ равным ТеггіѓогуПеѕсгірііоп. Далее следует выполнить вы- 
ражение 8501 О. В данном случае мы вызываем функцию ЕШДа{аТа е() 
создающую соединение с сервером базы данных, выполняющую запрос и воз- 
вращающую результаты в таблицу данных. 


Итак, мы получили результаты запроса ЗОГ, теперь требуется создать 
первую часть документа ХМІ, ©, который обсуждался в листинге 9.2. Мы 
начинаем документ и добавляем объект зе]ес+Е1етеп{, содержащий значе- 
ния параметров юЮпиМате и ЮюпиЁет, полученные из параметров запроса. 

В этом месте нужна проверка: вернул ли запрос 8501. какие-либо результа- 
ты ©. Если результаты есть, мы добавляем к ХМГ-документу вводную опцию 
"Зеесе А ТеггИогу" ©. 

Далее мы циклически проходим по результатам, представленным в ОааТ- 
аб Ме ©, заполняя значением столбца Теттіѓогу Оеѕсгірііоп дескриптор ор- 
попТехі. а значением столбца ТеггИогу 0 — дескриптор ориопУаше. Вло- 
жив пары "описание-идентификатор" в дескриптор позиции, мы получаем 
легкий способ циклического прохода значений на стороне клиента с помо- 
шью методов РОМ ХМГ (реализованных на ЈауаЅсгірі). Заполнив получен- 
ными результатами документ ХМГ, нужно закрыть корневой элемент ѕе- 
ІесіСһоісе и записать ответ на выходной странице 0. Клиенту возвращается 
ответный документ ХМГ, а объекту Сощеп оа4ег сообщается, что обработ- 
ка на стороне сервера завершена. Далее объект СопіепіГ оайег вызывает на 
стороне клиента функцию ЕШОгорро\п(), которая обработает созданный 
нами ХМГ-документ. 


Подытожим, что мы сделали на стороне сервера. Мы взяли значение из 
выбранного элемента списка и организовали запрос к базе данных, не от- 
правляя на дообработку на сервере всю страницу. Затем мы сгенерировали 
документ ХМГ и вернули его клиенту. Следующий этап обработки снова бу- 
дет происходить на стороне клиента, где мы должны преобразовать элементы 
ХМЕ в опции второго списка. 


9.4. Представление результатов 


Итак, теперь в документе ХМЕГ у нас есть результаты запроса базы данных, 
и мы собираемся пройти по его элементам, используя программный интер- 
фейс приложения РОМ ЈауаЅсгірі. С помощью функции веіЕіетепіѕВуТав“' 
Маше {) мы можем легко "перепрыгивать" на любой элемент документа. Эта 
Функция с помощью имени элемента находит его в РОМ (немного похоже 
иа то, как выдвигались алфавитные закладки в старомодном КоІойех). По- 


Глава 9. Динамические связанные комбинации 


дольку многие элементы в документе ХМГ, могут иметь одинаковые име- 
„ Функция 5е Е/етеп5Ву Таз Мате () в действительности возвращает массив 
цементов, выстроенных по порядку их появления в документе. 


д.4.1. Навигация в документе ХМІ 


Наконец-то мы можем завершить клиентскую часть сценария, добавляющую 
опции во второй список. Имена формы и элемента ѕе1есі, которые мы долж- 
ны заполнить, задаются в документе ХМІ. вместе со всеми доступными оп- 
циями списка. Чтобы выделить эти опции и вставить их в элемент ѕе1есї, 
нам необходимо пройти по всем элементам документа. 

Как только объект Сощеп .оадег получит с сервера документ ХМГ, он 
вызывает функцию ЕШОтгоррожп(), приведенную в листинге 9.2. В функции 
ЕШрЮтгоррожп() мы проходим по элементам епігу документа ХМГ и созда- 
ем для каждого из них новый объект Оріоп. Данные объекты представляют 
пары "текст-значение"', которые будут добавлены во второй список. В листин- 
ге 9.5 функция ЕШОгорВо\п() показана полностью. 


Листинг 9.5. Обновление страницы с использованием данных из ХМІ -ответа 
/ /О Получить ответный ХМІ-документ 

Ғопсёіоп Е111Ркорро\т () { 

// © Получить имя формы и элемента ѕе1есі 











уаг хп1рос = ёһіѕ.гед. геѕропѕехмі. аосотепіЕ1етмепі; 
уар хбе1 = хи1Оос. 

сеЕЕ1емепёѕВуТадМате ( 'зе1есеЕ1ещепЕ‘) [01; 
уаг зЕгЕМаше = х5е1. 


сһі14аМоаеѕ [0], Е:хзЕСЬ11а.поаеуУа1ое; 
уаг зЕгЕМаше = х5е1. 
ср11ЯМоаез [1]. Е1узЕСЬ11а.поаеуа1ае; 
// © Получить ссылку на элемент ѕе1есі 
уаг орјррі = аосотепё . Ёогтмѕ [$6 хЕМаме]. 
е1етепёѕ [зе хЕМапе]; 
орујррі.орііопѕ.1епоіһ = 0; 
// О Последовательно пройти по ХМІ-документу, добавляя опции 
уаг хКВомз = хи1Оос. 
десЕ1ещерезВуТадМаще ( 'епёгу’ уе 
Еог{1=0;1<хВом$ .1еподёһ;і++) { 
уаг ЕһҺеТехі = хВомсе [1]. 
ср11аМоаез [0] . Ё1гѕЕСһі1а.подеуа1хое; 
уаг ЕПе\уа1ае = хВомзЕ1]. 
С 
о 


























һі1аМодеѕ [1] .#ігѕёсһі1а.подеуа1лое; 
уар орёіоп - пем Орёіоп (ЕҺеТехё, ёһеуа1пце) ; 
Сгу{ орјррі.ааа (орёіоп,пи11); 
}саєсһ (е) { 
орјррі. ааа {орі іоп, -І); 
} 














362 Часть М. Ајах в примерах 


Функция ЕШОгорОо\п() вызывается объектом Сощепоадег. как толь. 
ко он получит и разберет ХМГ-ответ. Объект СопіепіГ оайег вызывается 
в функции ЕШОгорВо\п() посредством ссылки 111$, и с его помощью у», 
получаем ответный документ геѕропѕеХМІ, Как только у нас будет ссылка на 
объект аЧоситеп етеп{ отклика О, мы можем использовать функции ПОМ 
Јауа$сгірі для навигации по его узлам. Первая информация, которую нам 
нужно получить, — целевой список ѕе1есі, к которому мы добавим новые 
опции. Мы ищем элемент, именуемый зе1ес{Е]етеп{, используя функцию 
2 ЕетепВуТа Маше () и выбирая первый элемент из возвращенного этой 
функцией массива. После этого мы можем переходить к дочерним узлам @. 
Первый дочерний узел содержит имя формы, а второй — имя списка ѕе1есі. 


Используя два указанных значения, мы обращаемся собственно к самому 
целевому списку © и очищаем все существующие опции, устанавливая дли- 
ну массива его опций равной 0. Теперь мы можем добавлять новые опции 
к списку. Нам требуется доступ к элементам епігу документа ХМГ, поэтому 
мы еще раз вызываем функцию 5еЕетеп5ВуТаМате(). На этот раз тре- 
буется циклически пройти по массиву элементов, который возвращает эта 
функция, и получить пары "текст-значение" из каждого элемента О. Пер- 
вый узел-потомок каждого элемента епігу представляет собой текст опции, 
который будет показан пользователю, второй — значение. Получив два этих 
значения, мы создаем новый объект Оріоп, передающий текст опции как 
первый параметр конструктора и значение опции — как второй. Затем к целе- 
вому элементу ѓагееї добавляется новая опция, и процесс повторяется, пока 
не будут добавлены все новые опции. Сигнатура метода для ѕе1есі.ааа() 
зависит от браузера, поэтому мы используем оператор {гу ... саїсһ, пока 
не получим искомые сведения. Это все, что нужно-было сделать для заверше- 
ния нашей структуры связанных списков. Теперь можно загружать НТМГ- 
страницу, выбирать регион и наблюдать, как второй раскрывающийся список 
заполняется прямо из базы данных. На рис. 9.7 показано, как это выглядит. 
В данном примере из первого списка выбран регион Еаѕіегп, затем из ба- 
зы данных извлекаются и отображаются во втором списке соответствующие 
территории. Далее из первого списка выбирается регион Ѕошћегп, после чего 
второй список заполняется соответствующими территориями. 


Как видно на рис. 9.7, нам осталось сделать еще одно: изменить внеш- 
ний вид списка, сделав его более привлекательным. Размер второго списка 
увеличивается при заполнении опциями. Данное смещение размера можно 
исправить, применив к элементу правило С$$ (Саѕсайіпо ЅїуІе Ѕһееї — кас- 
кадная таблица стилей). 


9.4.2. Применение каскадных таблиц стилей 


Каскадные таблицы стилей позволяют менять визуальные свойства элемента. 
Мы можем изменить цвет и семейство шрифта, ширину элемента и т.д. На 
рис. 9.7 видно, что второй элемент ѕеІесі изначально имеет ширину всего 
несколько пикселей, поскольку не содержит ни одной опции. При выборе 
из первого списка региона Еа%егп второй элемент $е1ес{ расширяется Это 


Выбор опции из первого списка Заполнение аторого списка опциями 


Выбор новой опции из первого списка Повторное заполнение второго 
списка опциями 


Еспе В [Бава Тоту Ш (болот 3] 


аогдекуёт 
Буевав от 





Рис. 9,7. Зависимые списки в действии 


Місгоѕоћ Іліегпеї Ехріогег Рігеїох 






‘Согогача Эри 
{(Оепуәг 


Рис. 9.8. В различных Зале Мопісе 
браузерах элемент ѕеіесї 5собздоіе 
визуализируется по-разному 


изменение размера режет глаза и может раздражать пользователя. Чтобы 
решить эту проблему, можно задать ширину списка. 

<ѕеІесі пате="а4ТетгИогу" ѕіуІе="үіаєһ:200рх"х/ѕеІесі> 

Однако так мы не снимем всех проблем, если, например, одно из отобра- 
женных значений больше установленной нами ширины. В Еігеѓох, если эле- 
мент находится в фокусе, опции раскрывающегося списка показываются так, 
чтобы был виден весь их текст. Однако в Місгоѕоћќ Іпќегпеї ЕхрІогег текст 
усекается и не виден пользователю, как показано на рис 9.8. 

Чтобы избежать проблем, связанных с Іпѓегпеї ЕхріІогег, необходимо уста- 
новить ширину списка равной ширине наибольшей опции. В большинстве 
случаев единственной возможностью определения требуемого числа пиксе- 
лей является метод проб и ошибок 


Некоторые разработчики используют специальные уловки С$$ только 
для того, чтобы установить в Іпѓіегпеї Ехр]огег большую ширину элемента: 1 

(у1е="\/1 А: 100рх; міаћ:250рх" 

Гпѓегпеї Ехрогег распознает ширину, начинающуюся со знака подчерки- 
вания, тогда как другие браузеры ее игнорируют. Следовательно, рамки вы- 
бора Іпѓегпеї Ехр]огег будут иметь ширину 250 пикселей, тогда как другие 
браузеры — 100 пикселей. Однако полагаться на подобные "специфические 
особенности" браузера не стоит, поскольку в будущем их, возможно, испра- 
вят, а это нарушит отображение ваших страниц. 

В следующем разделе мы рассмотрим, как можно дополнительно улуч- 
шить наш сценарий зависимого выбора. 


9.5. ополнительные вопросы 


В данной главе мы создали упрощенную версию сценария зависимого выбо- 
ра. Серверу отправлялся единственный параметр, в ответ возвращался на- 
бор результатов для одного выбранного пункта. Возможно, вам кажется, что 
приложение должно работать иначе. Допустим, было бы неплохо добавить 
к форме еще один элемент, чтобы получилась тройная зависимость. Воз- 
можно, вы хотите, чтобы пользователь мог выбирать несколько элементов 
в первом списке. Если это так, тогда вам стоит прочесть следующие разде- 
лы, в которых рассказано, как реализовать названные идеи. 


9.5.1. Запросы при выборе нескольких элементов 


Обсуждавшийся выше код является очень простым,-он позволяет пользова- 
телю выбирать только одну опцию из каждого списка. В некоторых случаях 
пользователю требуется выбрать несколько опций в первом списке. Это озна- 
чает, что второй список в нашей комбинации будет заполняться значениями, 
соответствующими каждой выбранной опции первого списка. Этого можно 
добиться, несколько модифицировав серверную и клиентскую часть наше- 
го приложения. 

Первое, что требуется сделать, — это настроить первый список так, чтобы 
разрешить выбор нескольких позиций. Для этого к дескриптору ѕе1есі нуж- 
но добавить атрибут ти1їірІе. Чтобы задать количество отображаемых оп- 
ций, можно добавить атрибут $12е. Если значение $17е меньше числа опций, 
список будет прокручиваемым (и можно будет выбирать элементы, которые 
не видны в текущий момент). 


<ѕеІесі пате="аа1Керіоп" шаре ѕіле="4" 
опсһапве="ЕШТеггіѓогу(іћіѕ,аосоитепїі. Еогті1.аа1Теггіќогу)"> 
<оріоп уаіџе="1"> Еаегп</орНоп> 
<оріоп уаше="2">УМе {етп</орНоп> 
<оріоп уаше="3"> Могіћегп< /оріоп> 
<оріоп уаше="4"> Ѕошћегп</оріоп> 

</ѕе1есі> 


Далее необходимо изменить функцию ЕШТеггЦогу<). Вместо того что- 
бы просто обращаться к выбранному номеру элемента ѕе1есі, нам требуется 
последовательно пройти по всем опциям и найти все выбранные значения. 


Затем значения всех выбранных опций добавляются в строку параметров. 





ЕопсЕ1оп Еі11Теггібогу (оЕ1ет, оТагде® ) { 
уар џг1 'Рроор1еСотроМи1ёір1е.аѕрх ; 
уаг зЕгРагамз — "Ё=" + ОТагаее.Еогм.паше + 
Ғог (уаг 1=0; КоЕ1етм.орііопз.1Іепадёһ;і++) [ 
1Е (ОЕ1етм.орёіопѕ [1] .ѕзе1есёеа) { 


"&е=" + отТагдеё .папе; 








ѕігРагатѕ 
} 
} 
уаг 1оадегі 


+= 





"&а=" + оЕ1ет.орііопѕ [1] .уа1ае; 


рем 





пеЕ.СопеерЕГоааек (ц:1,Е11]Рхорромп,пи11,"РОЗТ" , зегРагкамз); 


} 





Последнее, что требуе' 
реализовав обра 
ЕТ несколько значений 


сценария, 
В.М 











ся сделать, — это изменить код серверной части 
ботку нескольких значений, переданных в запрос. 
‚ разделенных запятыми, представляются в одной 
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‘обы получить о 
на массив. Затем с помощью циклического 
для оператора 501. 
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‘дельные элементы, необходимо расщепить строку 
трохода массива задается условие 














бігіп9 - 
біргіп = 


Кеаоеѕё .Еогт("а") 


ин 
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После таких изменений пользователь сможет выбирать несколько регио- 
нов из первого списка выбора, после чего во втором списке появятся терри- 
тории, соответствующие каждому выбранному региону. 


9.5.2. Переход отдвойного связного выбора к тройному 


Переход от двойного связного списка к тройному требует минимальных из- 
менений (в зависимости от того, насколько мы хотим изменить логику сер- 
вера). Первый вариант заключается в том, чтобы перенести нашу логику на 
несколько серверных страниц и на каждой из них запустить свой запрос. Та- 
кое решение означает добавление к каждому обработчику опспапзе нужного 
списка еще одного параметра, представляющего ОКІ. вызываемого серверно- 


го сценария. 


Возможен и другой вариант: добавить к серверному коду оператор #]11 
е1ѕе или ѕуіісһ-саѕе. Чтобы использовать структуру 1#-е1зе, нужно опр^ 
делить, какой запрос следует выполнять для возврата соответствующих зне. 
чений. Простейшая проверка: решить, какой запрос ЗОГ, использовать, ос. 
новываясь на имени заполняемого элемента ѕе1есі. Таким образом, пр> 
реализации тройной комбинации мы можем проверять значение перемен- 
ной ѕігЕЈет. При этом нам не потребуется изменять обработчики событий 
опсһапее в клиентской части кода. 


Р1а ѕігѕд1 Аз 5Ег1та 
ТЕ зсгЕ1ет - "аа1Теггіёогу" Тһеп 
ѕігба1 "ЅЕІЕСТ Теүггііогуреѕсгірёіоп, " $ _ 
Теггіёогу1р" & __ 
" ЕВОМ Теггііогіеѕ" & _ 
‚ ИНЕКЕ " & эзбсуеге & _ 
" ОВОРЕВ ВУ Теггііогуреѕсгірііоп" 
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ѕЕгба1 = "СЕБЕСТ Со10отпі, Со1ами2" & 
" РВОМ Тар1еМате" & __ 
" МИНЕКЕ " & эзсуфеге & 
" ОВрЕВК ВУ Со1амо?" 
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При таком решении (и при условии, что раскрывающиеся списки запол- 
нены уникальными именами) на странице можно будет использовать мно- 


жественные связанные списки, не разделяя логику на различные сервер- 
ные страницы. 


9.6. Реструктуризация р 

Как вы думаете, чего не хватает в изложенном материале? Обобщения! Мы 
описали отличную модную технику реализации двойных списков, которая, 
однако, требует небольшой доводки, чтобы ее можно было обобщить. Мы пе- 
рейдем к этому, так что держитесь! Но вначале давайте рассмотрим кое-что 
еще более фундаментальное: инкапсуляцию некоторых элементов внутренней 
"кухни" Ајах. Для начала можно взять объект пей.Соп{еп .оа4ег, кратко 
представленный в главе 3 и более подробно рассмотренный в главе 5. Давай- 
те создадим этот объект, чтобы еще лучше понять Ајах. В идеальном случае 
данный элемент должен стать нашим объектом-'тгомощником" Ајах, кото- 
рый формирует всю инфраструктуру Ајах. Это позволит сосредоточиться на 
разработке вопросов, связанных только с зависимыми списками, а также со- 
кратить код, требуемый всеми остальными компонентами. Наш улучшенный 
объект пеё.Сощ{еп Гоа4ег в идеальном случае должен инкапсулировать со- 
стояние и поведение, требуемые для выполнения перечисленных ниже задач. 


• Создание объекта ХМЕНИрВедие$, который был бы понятен всем браузе- 
рам и не зависел от отправки запросов. Это позволит вызывающей сто- 
роне использовать метод создания независимо от остальной части объек- 
та. Данная возможность полезна, если вызывающая сторона использует 
другую идиому, каркас или механизм для действия запроса/отклика. 


. Предложить более удобный АРІ для обработки параметров запроса. 
В идеальном случае вызывающая сторона должна просто передавать от 
приложения состояние и разрешать "помощнику" пеі. Сопіепіоайег ре- 
шать все вопросы, связанные с созданием строк запроса. 


• Маршрутизация отклика обратно к компоненту, который знает, как его 
обработать, и выполнение соответствующей обработки ошибок. 


Ну что ж, начнем сборку объекта пе! .Сощеп оадетг, а затем перефор- 
мулируем наш сценарий двойного списка как компонент. 


9.6.1. Новый и улучшенный объект пеСотепШоааег 


Рассмотрим вначале, как следует изменить конструктор. 





пе .СопёепіІоадег = ЕопсЕ1оп! сотропепё, игі, 
пеєһоа, геаоџеѕёРагатмѕ= ) { 
// Состояние пе .Сопіепі1оайег 
Еһіѕ.сотропепі = сотропепі; 
еҺізѕ.цг1 = пу; 
{61$.геаце${Рагатз = гедиеѕїіРагатѕ; 
{615.ше!шо4 = шефод; 








} 

Данный конструктор вызывается с четырьмя аргументами. Первый, сот- 
ропепї, обозначает объект, пользующийся услугами данного "помощника". 
Вспомогательный объект будет предполагать, что сотропепі имеет метод 
ај ахОрааѓе () для обработки откликов и метод һапа1еЕггог () для обработки 
состояний ошибки. Подробнее этот вопрос мы рассмотрим позже. Второй ар- 
гумент, игі, обозначает ОКІ, вызываемый данным "помощником" для асин- 
хронного получения данных с сервера. Параметр тео обозначает метод 
НТТР-запроса. Допускаются значения СЕГ и РОЅТ. Наконец, аргумент ге- 
аоеѕіРагатеѓегѕ представляет собой массив строк вида Кеу=уаше, которые 
обозначают параметры запроса, передаваемые запросу. Это позволяет вы- 
зывающей стороне задавать набор параметров запроса, которые не меняются 
между запросами. Эти параметры будут присоединены к дополнительным па- 
раметрам запроса, передаваемым в рассмотренный ниже метод ѕепаКедиеѕі 
Таким образом, наш объект-‘помощник" может следующим образом созда 
ваться клиентом: 

уаг ѕїг = "Еазѕѓегп"; 

уаг аСотшр - пем ЗопеСоо1Сотропепі (...); 

уаг ајахНе1рег = пем пеЁ.СопеепеГоа@ек ( аСопр, 


"аеёКеЁгеѕћраёа.аѕрх", "РОЗТ", 
[ "ацеку=" + 6х, "1апоге_сазе=Егоае" ] 





); 

Рассмотрим теперь оставшуюся часть АРІ. Здесь следует обратить в: 
ше внимание на стилистическую природу примера кода. Область действ» 
методов этого объекта распространяется на объект-прототип, прикрепле; 
ный к функции конструктора. Данная технология является стандартной и \ 
написании объектно-ориентированного кода ЈауаЅсгірі, поскольку примен 


ет определения метода ко всем экземплярам объекта. Тем не менее сущ^. 
ствует несколько способов, позволяющих задать такое поведение синтакси- 
чески. Одним из наших любимых (его структура позаимствована из библио- 
теки ргоѓоїуре.јѕ, внедренной в Кобу Оп Ка|П$) является буквальное созда- 
ние объекта-прототипа. 

пеї.Сопіепі оайег.ргоѓоїуре = { 

// Первый метод, прикрепленный к прототипу 

теїіһоаії: ГапсНоп(а, Ы, с) { 


Ь 

// Второй метод 
тпесһоӣа2: Ёџопсёіоп() { }, 
песһоӣз: Ёопсёіоп(а) { } 

$}; 

С точки зрения синтаксиса достоинством данного подхода является ла- 
коничность. Как читать данный фрагмент? Внешние скобки представляют 
литерал объекта, а содержимое — это разделенный запятыми список пар 
"свойство-значение" в объекте. В данном случае наши свойства являются 
методами. Пары "свойство-значение" задаются как имя свойства, затем сле- 
дует двоеточие, а после него ~ значение свойства. В этом случае значения 
(или определения, если вам угодно) являются литералами функций. Все про- 
сто, правда? Достаточно помнить, что методы, которые будут использовать- 
ся начиная с этого момента, предполагаются содержащимися внутри лите- 
эала объекта-прототипа (как показано выше). Кроме того, обратите внима- 
ние на то, что последнее свойство не требует (а следовательно, может не 
№геть) после себя запятой. Теперь давайте вернемся к рассматриваемой за- 
даче: сборке АРІ. 

АРІ должен удовлетворять упомянутым выше требованиям, поэтому рас- 
:мотрим их последовательно. Первое, что нам требуется, — обработка со- 
дания объекта ХМЕНИрКВеаиез независимо от браузера. Звучит, как метод! 
С счастью, мы уже реализовывали его несколько раз. Все, что требуется сей- 
гас, — создать его как метод нашего "помощника" (листинг 9.6), чтобы нам 
ольше никогда не приходилось его писать. 

Листинг 9.6. Метод ѕеіТгапѕрогї 


веїТгапѕрогі: Ёопсііоп() { 
уаг їгапѕрогі; 
// Родной объект 
И { міпаоу.ХМІ.НірКедиеѕі ) 
{гапзрогЕ = пем ХМІ.Нір Кедиеѕі(); 
// Объект ТЕ АсїііуеХ 
е1ѕе Ш { мшаом.АспуеХОБесЕ ) { 
{гу { 1гапзрогЕ = пем АсиуеХОБесЕ('Мзхи12.ХМЕНТТР'); } 
саїсћ(етгг) { 
{гапзрогЕ = пем АснуехОБесЕ(' М1сгозой.ХМЕНТТР'); 
} 
} 


геиги їгапѕрогі; 


}, 


Данный код не требует очень подробных объяснений, поскольку данную 
тему мы рассматривали неоднократно, однако на этот раз мы привели акку- 
ратно упакованный метод, обеспечивающий работающий во всех браузерах 
объект Ајах транспорта данных для обработки нашей асинхронной связи. 
Второе упомянутое нами требование касалось обеспечения более удобного 
АРТ для обработки параметров запроса. Чтобы его можно было использо- 
вать во множестве приложений, очевидно, что отправляемый запрос будет 
требовать в качестве параметров значения времени выполнения. Мы уже за- 
писали некоторое исходное состояние, представляющее параметры запроса, 
постоянные для различных запросов, но кроме этого нам требуются значения 
времени выполнения. Рассмотрим поддержку приведенного ниже кода. 


//Предполагается инициализация со значениями времени 
выполнения 


уаг а,Ъ,с; 

уаг а]ахНе!рег = пе пет. Соп{еп{Гоааег(... ); 

ајахНе1Ірег.ѕепаКедиеѕі( "рагат1=" + а, "рагат2=" + Б, 
"рагат3=" + с ); 


Итак, при данном требовании к использованию определяется ѕепаКедиеѕі, 
как показано в листинге 9.7. 


ѕепаКедиеѕі: Ғипсііоп() { 
//О Записываем аргументы в массив 
уаг гедиеѕіРагатѕ = (|; 
Гог ( уаг і = 0 ; і < агғвитепіёѕ.Іепеёһ ; і++ ) { 
гедоеѕї Рагатѕ.риѕһћ (агвитепіѕ[і]|); 


// © Создаем запрос 
уаг гедиеѕі = ёһіѕ.деёТгапѕрогі (); 
геаоеѕі.ореп ( ЕҺіѕ.месһоа, ёһіѕ.огі, гие ); 
геаџеѕіё . ѕзеіКесиеѕіНеадег ( 'Сопіепі-Туре', 
"арр1ісаёіоп/х-уллт- Ёогт-ог1епсодеа'); 





// © Задается обратный вызов 

уаг отһіѕ = 6618; 

геаџеѕі .опгеадуѕіаёсесһапде = Ёџпсііоп() { 
оТһіѕ.һапа1еАјахВеѕропѕе (кедиеѕі) } ; 





// О Отправляется запрос 
геаоеѕі .ѕепа ( ЕһҺіѕ.аоегуѕбігіпо (кесиеѕёРагаюњѕ) ); 


> ө 


Данный метод расщепляет процесс отправки запроса на четыре этапа. 
Рассмотрим эти этапы подробнее. 





О Данный этап использует тот факт, что ЈауаЅсгірі создает псевдомассив 
агвитепіѕ, область действия которого распространяется на функцию. 
Как можно догадаться по имени, агдитег^эсодержит аргументы, пере- 
данные функции. В данном случае ожидается, что аргументы - это стро- 
ки вида Кеу=уаше. Пока что мы просто копируем их в массив первого 
класса. Кроме того, обратите внимание, что все переменные, созданные 
в этом методе, начинаются с ключевого слова уаг. Хотя компилятору 
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Часть М. А/ах в примерах 


Јауа8сгірї сильно бы понравилось, если бы мы оставили ключевое слово 
уагВ покое, то, что мы так не поступили, очень важно Почему? Если мы 
опустим это ключевое слово, переменная создается с глобальной областью 
действия — т.е. видимой для всего кода в вашей вселенной Јауа$Ѕсгірї! Это 
может вызвать нежелательное взаимодействие с остальным кодом {на- 
пример, в использованном вами чьем-либо сценарии переменная названа 
точно так же, как иу вас). Короче говоря, подобная ситуация гарантиру- 
ет кошмар отладки. Позаботьтесь о себе сами — приучитесь использовать 
переменные с локальной областью действия везде, где это возможно. 


Здесь наш метод использует метод веіТгапѕрогі, определенный в листин- 
ге 9.6, для создания экземпляра объекта ХМЕНиИрКеаиез(. Затем обраба- 
тывается запрос, и его заголовок Сощеп-Туре инициализируется, как 
в предыдущих примерах. Ссылка на объект хранится в локальной пере- 
менной гедиеѕі. 


На данном этапе решается задача обработки отклика. Вы наверняка пы- 
таетесь догадаться, зачем была создана переменная оТіһіѕ. Обратите вни- 
мание на следующую строку, где фигурирует анонимная функция, реаги- 
рующая на изменение статуса готовности (опгеайуѕѓіаїесһапее) нашего 
объекта запроса и ссылающаяся на оТһіѕ. Данный прием называется за- 
мыканием. В силу того что внутренняя функция обращается к локальной 
переменной, создается неявный контекст выполнения (или область дей- 
ствия), позволяющий поддерживать ссылку после выхода из замыкающей 
функции. (Подробнее о замыкании речь пойдет в приложении Б.) Это поз- 
воляет реализовать обработку отклика Адах посредством вызова метода 
первого класса на нашем объекте ајахНе1рег. 


Наконец мы отправляем запрос Адах. Обратите внимание на то, что мас- 
сив, созданный нами на этапе 1, передается методу диету», который 
преобразовывает его в одну строку. Эта строка становится телом запроса 
Ајах. В действительности метод диоегуЅігіпе Не является частью откры- 
того контракта, который мы обсуждали ранее, но относится к вспомога- 
тельным методам, облегчающим чтение и понимание кода. Рассмотрим 
его подробнее в листинге 9.8. 


аоегуЅігхпе: РапсНоп(аг?$) { 
// Постоянные параметры 
уаг гедиеѕіРагатѕ = []; 
Гог ( уаг1 = 0 ; і < 1115. геачез( Рагатз.1еп5 В ; 1++ ) { 
геапе${ Рагатз.ризВ (161$.гедие${Рагатз [1]); 
} 

// Параметры времени выполнения 
Гог ( уаг ] = 0 ; ј < аго$.1еп5Е В 
геаоеѕРагатѕ.риѕћ (агеѕ[ј]|); 

} 

уаг аоегу8ігіпе - : 

Ш ( гедоеѕ#Рагатѕ 855 гедиеѕРагатѕ.іепвёһ > 0 ) { 
Гог ( уаг і = 0 ; і < геачез(Рагат$.1епй ; і++ ) { 


++ ) 4 


5 
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ачегубігіпа += гедоезЕРакатз [1] + *&'; 
} 
ачекуѕбігіпо • аиџегубігіпо.ѕирѕікіпо{0, ачегубігіпа.1епоёһ-1); 


} 


геіџгп аиоегуѕёгіпӯа; 


Данный метод принимает параметры запроса, с которыми был создан 
объект пеї. Сопіепіоайег, а также дополнительные параметры времени вы- 
полнения, переданные в метод ѕепаКедиеѕї и помещенные им в общий массив. 
Затем массив обрабатывается и превращается в строку запроса. Результат 
описанных действий представлен ниже. 


уаг Ве!рег = пеу пеї.Сопѓепіоааег{ ѕотеОЫј, ѕоте0ті, "РОЅТ", 
["а-опе", -р-(мо"] 


); 
уаг ѕіг = ајахНе1рег.диегу$їгіпе( 
["с-@гее", "а-ѓошг"] 

); 








ѕг -> "а*=опе&б=бмо&с=йтгее& =ош" 

Последнее, что нам требуется сделать для получения полнофункциональ- 
ного вспомогательного объекта, — это реализовать сотрудничество с компо- 
нентом с целью обработки отклика, поступающего от Ајах. Если вы были 
внимательны, то, возможно, уже знаете имя данного метода. Действитель- 
но, наш метод ѕепаКедиеѕі уже задал, как он будет обрабатывать отклик 
свойства опгеаӣуѕѓіаїесһапее запроса. 


гедиеѕі.опгеайуѕіаќіесһапре * ѓипсііоп() { 
оТтћіѕ. Нап ]еА] ах Кеѕропѕе (гедиеѕії) 


} 
Все правильно, осталось всего лишь реализовать метод һапаіеАј ахКе- 
зропзе. Реализация этого метода приведена в листинге 9.9. 


Бап@еАдлахКезропзе: ГапсНоп(гедие$) { 
Ш ( геаче$.геаду(ае == пе. КЕАГ: ЅТАТЕ СОМРГЕТЕ ) { 
Ш ( (115.135 иссез$(геачезе) ) 
// Компонент сообщения с откликом 
{015$. сотропепЕ.а]ах Орааѓе (гедиеѕі); 
е1ѕе 
// Компонент сообщения с ошибкой 
{01$.сотропепЕ. Вапа1е Еггог(гедиеѕі); 


} 
}: 


15 5иссе$з:  Гапс1от(геаце$) { 


е 


теги гедиеѕі.ѕїаїиѕ =° 0 
П (тедиоеѕі.ѕїаїиѕ >= 200 && гедиеѕїі.ѕїаїиѕ < 300); 


Все, что делает метод, — проверяет, равно ли значение состояния геайуѕ- ' 
{а(е четырем (указывает на завершение), и уведомляет 111$, сотропетф, что 
отклик доступен. Но мы еше не закончили. Существовало еще требование 
соответствующей обработки ошибок. Но что такое "соответствующая"? Этого 
мы сказать не можем. Обработка ошибок — это решение, которое нужно отло- 
жить для другого объекта. Следовательно, мы предполагаем, что наш клиент 
161$, сотропепі, имеет метод Вап ]еЕггог, который и выполняет необходи- 
мые действия, когда отклик Ајах поступает как-то не так. Этот компонент 
может в свою очередь делегировать решение другому объекту, но это уже 
не проблемы нашего вспомогательного объекта. Мы обеспечили механизм 
и позволим другому объекту обеспечить семантику. Как говорилось ранее 
мы предполагаем, что {61$ . сотропепі имеет методы а] ахирааѓе и вап еЕг- 
гог. Это неявный созданный нами контракт, поскольку ЈауаЅсгірі не отно- 
сится к языкам со строгим контролем типов, которые могут принудительно 
вводить подобные ограничения. 


Поздравляем! Вы трансформировали пе{.Сощеп(Гоадег Б гибкий вспо- 
могательный объект, который выполняет всю грязную работу Адах для ваших 
ОНТМГ-компонентов, лоддерживающих Ајах. А если у вас есть ОНТМГ- 
компонент, который еще не поддерживает Адах, теперь он станет проще! Кста- 
ти, нам еще нужно написать компонент двойных списков. 


9.6.2. Создание компонента двойного списка 


Мы немного поработали с объектом пеї. Сопѓепіоайег, чтобы существенно 
упростить нашу задачу, к которой теперь пора вернуться. Предположим, что 
нам, первоклассным разработчикам, поручили создать сценарий Связанного 
выбора, который можно использовать повторно во многнх^онтекстах в при- 
ложении или нескольких приложениях. В связи с этим для удовлетворения 
поставленным требованиям необходимо рассмотреть несколько вопросов. 


. Предположим, мы не можем (или не хотим) вручную менять НТМГ- 

. разметку окон выбора. Так может быть, например, если мы не отвечаем за 
производство разметки. Возможно, элемент ѕе1есі генерируется ЈЅР или 
другим дескриптором на языке сервера. Возможно, какой-то дизайнер на- 
писал НТМІ -код, а мы желаем по возможности сохранить его без измене- 
ний, чтобы не допустить дополнительного этапа переверстки страницы. 


Нам требуется сценарий связывания, который может использовать раз- 
личные указатели ОКІ. и параметры запроса для возврата данных орііоп. 
Кроме того, требуется, чтобы структура допускала будущую настройку. 


Необходимо, чтобы поведение, реализованное в сценарии зависимого вы- 
бора, можно было потенциально использовать в нескольких наборах де- 
скрипторов зе1есЕ на одной странице, а также, чтобы существовала воз- 
можность реализации тройных или четверных комбинаций, как обсужда- 
лось ранее. 


Начав с первой задачи (максимально сохранить НТМГ-разметку), пред- 
положим, что характерным представителем НТМГ-кода, с которым нам при- 
дется работать, является разметка, приведенная в листинге 9.10. 


< 61> 
<Боау> 
<Еоги паме="Коги]1 "> 
<зе1есЕ іа="гедіоп" папе=" гесдіоп" > 
<орііопѕ... > 
</зе1есЕ> 
<зе]есЕ іа="(еггіїогу" пате="їеггііогу" /> 
</огт> 
</Љоау> 
<> 


Нам нужен компонент ЙоиђБ/еСотђо, который можно присоединить к до- 
кументу, возложив на него всю магию двойной комбинации. Поэтому пой- 
дем с конца и рассмотрим, как бы нам хотелось, чтобы выглядела разметка, 
а затем сообразим, как ее реализовать. Изменим разметку так, чтобы она 
выглядела подобно коду, приведенному в листинге 9.11. 


Листинг 9.11. Модифицированная НТМІ-резметка . '°*ТЯИЯНИИТТ 


<ћітм1> 
<Һеаа> 


<ѕсгірі> 
Ғопсіёіоп іпј есіСотропепіВећһауіогкѕ() { 
уаг доџр1еСотроорііопѕ = {}; 
<!— Компонент рооџр1ІеСотро —> 
пем роџь1еСопшро ('гесдіоп', 'іеггііогу', 
`роџр1 еСопрохмі.аѕрх', доџь1есотроорёіопв ); 


} 
</зсх1рЕ> 
</ћеаа> 
<ройу оп1оаа= 
•іпјесёСопропепіВећһауіогв () " 
> 
<Еогт паме="ЕКоги1 "> 
<зе1есЕ іа="гедіоп" пакае="кесдіоп" > 
<орёіоп уа1џе="-1">Ріс]с А Весдіоп</орёіоп> 
<орііоп уа1џе= "1 ">Еаѕіегп</орёіоп> 
<орііоп уа1џе= "2 ">Меѕзіекп</орііопь> 
<орёіоп уа10џе= "3 ">Могіћегп</орііоп> 
<орііоп уа1џе= "4" >Ѕоџіһегп</орііоп> 
</ѕзе1есіё> 
<зе1есЕ 1а= "сёеггііогу" пате= "іергіёогу" /> 
</ Еогт> 
</роду> 
</ћЕт1> д 





Разметка изменилась следующим образом 


Создана функция, инжектирующая в документ требуемое нам поведение 


. К элементу тела, вызывающему данную функцию, добавлен обработчик 
оп[оа4. 


Обратите внимание на то, что в элементе <Боду> страницы никаких мо- 
дификаций нет. Как отмечалось ранее — это хорошо. Таким образом, мы 
уже удовлетворили первому требованию. Но давайте посмотрим на функ- 
цию іпјесіСотропепіВећауіогѕ() — похоже, что есть еще одна работа. Дей- 
ствительно, нам нужно создать объект ЈауаЅсгірі, именуемый Бои еСотбо 
в котором было бы реализовано все поведение, необходимое для поддержки 
функциональных возможностей двойной комбинации. 


Логика компонента ВочЫеСотБо 


Для начала рассмотрим внимательнее семантику создания нашего компо- 
нента. Функция іпјесіСотропепіВеһауіогѕ() создает объект Пой МеСотьо, 
вызывая его конструктор. Этот конструктор определен в листинге 9.12. 


Листйнг-9,12. Компонент ОоиріеСотророибіеСотро 
Ғопсёіоп роџр1еСотро ( таѕёег1а, ѕ1ауе1а, чогі1, 
орііопѕ ) { 
// Инициализация состояния 
{01$. таѕѓег - аоситепі. зе Е етеп Ву1а(таѕіегіа); 
һіѕ.51ауе = аӢаоситепі. зе ЕІ етеп Ву1а(ѕ1ауе1а); 
1һіѕ.орііопѕ = орііопѕ; 
%һіѕ.ајахНе1Ірег " пем пе. Сопіепіі оааег( 161$, игі, "РОЅТ", 
орііопѕ.гедиеѕїРагатеѓегѕ ІІ, И ); 
// Инициализация поведения = 
{61$.10161а117е Вебау1ог(); 





Данная конструкция должна быть вам уже знакомой; наша функция кон- 
структора инициализирует состояние объекта Рои еСотфо. Описания аргу- 
ментов, которые необходимо передать конструктору, приведены в табл. 9.2. 

Рассмотрим природу состояния, поддерживаемого объектом ПооЫе- 
Сотбо, — особенно ОКІ и опции. Две данные составляющие состояния удовле- 
творяют второму указанному ранее функциональному требованию, т.е. наш 
компонент может задействовать для извлечения данных любой ОКІ, кро- 
ме того, этот компонент можно настраивать с помощью параметра орііопзѕ. 
Пока что мы предполагаем, что в объекте опций найдем только одно — свой- 
ство гедиеѕіРагатеќѓегѕ. Однако, поскольку параметр орііопѕ — это просто 
общий объект, мы можем приписать ему любое свойство, необходимое для 
облегчения последующей настройки. Наиболее очевидными "довесками" объ- 
екта опций являются стилевое оформление классов С98 и прочее из этой же 
серии. Однако стиль и функции связных списков очевидно являются незави- 
симыми концепциями, поэтому решение вопросов стилевого оформления мы 
оставляем дизайнеру страницы. 


Таблица 9.2. Описание аргументов 
дргумент Описание 


таѕіегіа Идентификатор элемента разметки, соответствующего основному элементу 
зе! ес+{. Выполнение операции выбора на данном элементе определяет 
значения, отображаемые вторым элементом зе1ес{ 


$|ауе!а Идентификатор элемента разметки, соответствующею зависимому элементу 
зе ес+{. Значения этого элемента будут меняться в зависимости от выбора 
пользователем значения основного элемента ѕе1е сї 


орііопѕ Общий объект, предоставляющий другие данные, требуемые сценарием 


Мы уверены, что для многих из вас самой интересной частью конструк- 
тора являются последние две строчки: 


{515.алахНе|рег = пем пеї. Сопѓепіоайег( 101$, игі, "РОЗТ", 
орііопѕ.гедиеѕіРагатеѓегѕ || [] 

2 

Разумеется, мы знаем, что наш компонент требует возможностей Ајах. 
Благодаря везению и толике планирования мы уже имеем объект, выпол- 
няющий большую часть всей работы, выпадающей на долю Ајах, — речь 
идет об объекте пеї. СопіепіГ оаайег, который мы предусмотрительно напи- 
сали ранее. Объект Рои еСотбо просто передает себя (посредством 111$) как 
параметр компонента вспомогательному объекту Сопѓепі[ оайег. Кроме того, 
как целевой ОВГ запросов Ајах этому вспомогательному объекту передается 
параметр игі, и с помощью строки "РОЅТ" задается метод НТТР-запроса. 

Наконец, свойство гедиеѕіРагатеѓегѕ объекта опций (или пустой мас- 
сив, если не была определена ни одна опция) передается как массив "посто- 
янных" параметров, которые будут отправляться со всеми запросами Адах. 
Напомним также, что поскольку мы передали {01$ как аргумент компонента, 
объект РоиМеСоштбо обязан реализовать указанный ранее неявный контракт 
с объектом пе!ё.Сошеп оадег. Другими словами, мы должны реализовать 
методы а] ахОрда{е () и Вап 1еЕггог (). Чуть позже мы разберем этот момент 
подробно, а пока рассмотрим последнюю строку нашего конструктора: 


с51$.10161а117еВерау1ог{); 


Наконец-то наш конструктор делает что-то, похожее на желаемое пове- 
дение. Да, наступил момент, которого мы так долго ждали: реализация по- 
ведения. Все, что мы будем делать далее, непосредственно связано с обес- 
печением функциональных возможностей зависимых списков. Поэтому без 
лишних слов рассмотрим данный метод (а также все остальные методы Роп- 
ЫеСотбо, которые нам потребуются). Благодаря тому что мы упорядочили 
всю инфраструктуру, наша задача уже не выглядит устрашающе. Помните, 
что все методы, которые встретятся при разборе данного примера, предпола- 
гаются внедренными в литеральный объект-прототип (точно так же, как мы 
делали при реализации пеї.Сопіепі[ оааег). 


РГоџр1еСотро.ргоёоЁёуре = { 
// все методы 


}; 
Ну что ж, заглянем под капюшон. Ниже приведен метод іпіїіа1іхеВе- 
Бау1ог(). 


іпіёіа1іғхеВеһауіог: Ғџпсііоп() { 
хаг отһіѕ = 661$; 
СҺі5ѕ.таѕбег.опсһапде = ЕапсЕ1оп() { отһіѕ.таѕсегСотроСһапдеа(); }, 


)/ 

Коротко и ясно. Данный метод помещает обработчик событий опспапзе 
в основной элемент ѕе1есі {ранее это делалось в самой разметке НТМ). 
При срабатывании обработчик событий вызывает на нашем объекте тазег- 
СотЬоСһапреао другой метод. 

таѕіегСотБоСћапрвеа: ҒЁипсііоп() { 


уаг диегу = #һіѕ.таѕіег.орііопѕ| 
101$. таѕѓег.ѕеіесѓеа1іпаех]|.уаіие; 


ћ15.ајахНе1рег.ѕепаКедиеѕі( '9=' + диегу ); 
Ь 
Удивительно, но все по-прежнему коротко и ясно. Все, что требуется от 
этого метода, — это создать параметр запроса и отправить наш запрос Ајах. 
Поскольку вся работа Ајах была вынесена в другой объект, все действия фор- 
мулируются с помощью одной строки кода. Напомним, что зепаВеааезе {) 
создаст и отправит ХМІНеірКедиеѕі, который направит отклик обратно на- 
шему методу а)ахОраасе (). Запишем все сказанное. 






























































ајахОрааёе: ЕопсЕ1оп (кесоеѕі) { 
уаг ѕ1ауеорііопѕ = ёһіѕ.сгеаіеорііопѕ ( КРА 
геацеѕі . геѕропѕехмі. аосоитепЕЕ1етепі) ; 
// Очистить существующие опции 
ЕҺіѕ.ѕ1ауе.1епоіһ = 0; 
// Заполнить новые опции 














Ғор ( уаг 1 = 0 ; 1 < ѕ1ауеорііопѕ.1еподёһ ; 1++ ) 
Суу { 
Еһ1іѕ.ѕ1ауе.ада (ѕ1ауеорёіопѕ [1], пи11); 
}саёсһ (е) { 
ЕҺіѕ.ѕ1ауе.ааа (ѕ1ауеорііопѕ= [1] , -1) ; 
} 
Ь 


Данный метод принимает ответный ХМГ-документ от объекта гедиеѕі 
и передает его методу сгеаеОрНоп$(), который создает элементы оріоп 
нашего зависимого элемента ѕе1есі. Затем метод просто очищает и повтор- 
но заполняет зависимый элемент ѕеіесі. Метод сгеаїеОрііопѕ(), хотя я не 
является частью никакого публичного контракта, относится к вспомогатель- 
ным методам, которые облегчают чтение и понимание кода. Его реализа- 
ция и еще один вспомогательный метод, веіЕІетепіСопіепї (), показаны 
в листинге 9.13. 


Листинг 9.13. Методы заполнения 


сгеаіеОрііопѕ: ЕапсЕ1оп (ајахКеѕроп.ѕе) { 
уаг пемОрііопѕ = []; 














уар епігіеѕ = аахВезропзе. чес Е1етепе ВуТадМапе ('епёгу'); 
Ғог ( уар 1-0 ; 1 < епіүіеѕ.іеподіһ ; 1++ ) { 
уар бех = ёһіз.деёЕ1етепёСопёепі (епігкіеѕ [1], 
"орёіопТехі') ; 
уаг уа1џе = ЁҺһіз.деёЕ1етепёСопіепі (епігіеѕ [1], 
"орёіопуа1пџе!') ; 


пемОрііопѕ.риѕћ ( пем Орііоп{ ёехі, уа1ое ) ); 
} 


геёогп пемОрЕ1опз; 


Ь 


чееЕ1етепеСопбете: Ёцпсёіоп (е1етепе , сачМаме) { 
уаг сһі1аЕ1екаепі = е1епепі .деёЕ1етепёѕВуТад\атме (садчМаме) [0]; 
геёџгп {сһі1ав1етмепё.ёехі != опаеЁЕ1пеа) ? сһі1аЕ1епепі .ёбехі 
сҺі1аЕ1етепё .ёехЕСопёепі; 


























Ь 

Данные методы выполняют всю тяжелую работу, действительно извлекая 
значения из ответного документа ХМГ и создавая по ним объекты опций. 
Напомним, что структура ХМТ-отклика выглядит следующим образом: 


<?хий уегѕіоп»'* 1.0" ?> 
<зе1есЕСВо1се> 





<ещгу> 
<орНопТехЕ > Зе1есЕ А Теггіїогу< /орііоп ТехЕ > 
<орНоп\Уаше> -1</орйоп\Уаше> 
</епїгу> 
<епїтгу> 
<орНопТех( > Теггіїогу Оеѕсгірііоп < /ор оп ТехЕ> 
<орНопУаше > ТеггИогу1О < /орнопУаше> 
</епїгу> 
< /ѕеІесіСһоісе> 
Метод сгеаїеОрііопѕ () последовательно проходит по всем элементам еп- 
{гу в ХМІ -документе и извлекает текст из элементов орііопТехі и орНоп\Уа- 
Ге посредством вспомогательного метода веїЕіетепіСопіепі (). Касатель- 
но метода веїЕІетепіСопќѓепі () стоит отметить только то, что он использует 
ІЕ-совместимый атрибут їехї элемента ХМІ, если он существует; в противном 
случае применяется стандартизованный МЗС атрибут іехіСопќѓепї. 


Обработка ошибок 


Ну вот и все. Вернее, почти все. Мы реализовали все линии поведения, необ- 
ходимые для раскрытия потенциала данного компонента. Но постойте! Мы 
говорили, что обработка состояний ошибки также булет. Вы можете сказать, 
что нам требуется еще реализовать метод Һапа1еЕггог (), чтобы с объектом 
пеї.СопѓепіГ оаа.ег можно было нормально работать. Ну так давайте реали- 
зуем его и действительно завершим эту задачу. Итак, какое восстанавливаю- 
щее действие требуется при наличии ошибки? Пока что мы этого сказать не 
можем. Вообще-то, этот вопрос должно решать приложение, использующее 


наш компонент РоџЫеСотќоо. Похоже, что при такой формулировке нашлась 
работа нашему объекту опций (помните, мы передавали его конструктору?У 
Рассмотрим возможность такого контракта. Что будет, если мы создадим нащ 
компонент связных списков с кодом, подобным приведенному ниже? 


Ғопсііоп шуАррИсаНопЕтгогНапМег(геаие$) { 
// Функция приложения, отвечающая за обработку ошибок 


} 

уаг сопроОрёіопѕ = { геааезеРагкапмесетз: | 
"рагамі =опе", "рагхат2=Емо" ], 

еггогНапӣ1ег: пуАрр1ісаёбіопЕггогНапа1ег 


Е. доц еСотфо • пем Пон еСотЪфо( 'гез1оп', ‘'Еегг!(огу’, 

"Бои еСотфохМГ..азрх', 
сотбоОрііопѕ ); 

В этом сценарии, мы позволяем приложению определить функцию туАр- 
рИсанйоп ЕггогНав [ег (). Именно в реализацию данного метода мы можем 
поместить логику приложения, обрабатывающую ошибочные ситуации, Это 
может быть предупреждение. Или менее навязчивое сообщение "упс!" в сти- 
ле СМай. Суть такого решения заключается в том, что мы делегируем при- 
нятие решения приложению, использующему наш компонент. Как и ранее, 
мы предоставляем механизм и позволяем кому-то еще обеспечить семанти- 
ку. Следовательно, теперь нам нужно написать метод вап еЕггог () объекта 
БоиЫеСотбо. 


БапеЕггог: Ғоипсіор(гедиеѕі) { 
Ш ( 1һ15.орііопѕ.еггогНапӣїег ) 
һіѕ.орііопѕ.еггогНапа1ег(гедиеѕі); 





Счастье компонента 


Поздравляем! Наконец-то мы сделали все. У нас есть общий компонент, кото- 
рый мы можем создать с идентификаторами любых двух элементов ѕе1есі 
и некоторой информацией по конфигурации, также у нас есть возможность 
зависимого выбора. И тут... распахивается дверь’. 

Пятница, 14:45, входит менеджер, ничего не смыслящий в программи- 


ровании. "Джонсон, — восклицает он. — Нам нужна поддержка подтерри- 
торий! ... И она должна быть готова к утру понедельника!" Драматическая 
пауза. "О-ох!" — выдавливаете вы из себя. Затем вы собираетесь и говорите: 


"Я сделаю это, сэр. Даже если мне придется проработать все выходные". Он 
вручает вам новый дизайн страницы: 
<іогт> 
<веіесі 14="гег1оп" пате="теріоп"> <ѕејесі> 
<ѕеІесї іа="Гіеггііогу" пате="етгИогу"> < /ѕеІесі> 
<ѕеІесї іа="ѕ06Теггійогу" пате="ѕ0Ы Геггііогу"Х/ѕеесі> 
</Жогт> 
Начальство уходит. Вы открываете НТМТ-страницу в Етасѕ, поскольку 
так вам удобнее. Переходите сразу к заголовку. Курсор мигает — вы начина- 
ете набирать. 


<ѕсгірё> 


Ғопсёіоп іпјесЕСопропепіВеһауіогѕ () { 
уаг оріѕ1 *• { геаџеѕіРагатеёсегѕ: "паѕіег=гесдіоп" }; 
уар оріѕ2 = { геааезЕРагамесег$: "таѕёег=ёеггііогу" 9; 
рем роџр1еСопро( 'гесіоп’, 
Беггіёогу', 
'Юоџр1іеСопрохмі.аѕрх', оріѕі ); 
пем роџр1еСопро ( 'беггііогу', 
‘ѕорТеггібогу', 
'"Юоџр1іеСопрохмі.аѕрх', орёѕ2 ); 








</зск1рЕ> 


Вы нажимаете клавишу, запуская макрос, который отформатирует ваш 
код. Сохраняете. Бросаете через плечо: "Я буду работать из дома", проходя 
мимо офиса менеджера в 14:57. Дома вы плюхаетесь на диван и думаете 
про себя: "Да, я крут!" Ладно, хватит фантазий. Запомните, что вы сделали, 
и забудьте обо всем остальном. 


9.7. Резюме 





Двойная комбинация элементов зе1ес{ представляет собой эффективный ме- 
тод создания для пользователя динамических элементов формы. Мы можем 
использовать обработчики событий ЈауаЅсгірі для отслеживания изменений 
в одном элементе ѕе1есі и инициации процесса обновления значений вто- 
рого элемента. С помощью Ајах мы можем избежать длительного времени 
загрузки страницы, характерного для решений ЈауаЅсгірі. Используя Ајах, 
мы можем организовать запрос к базе данных, не отправляя всю страницу на 
сервер для дообработки и не разрушая взаимодействие пользователя с фор- 
мой. Ајах позволяет создавать \еБ-приложения, более близкие к клиентским 
приложениям. 

Используя приведенный код, вы сможете разработать более сложные фор- 
мы, не утруждаясь обычными проблемами дообработки страниц на сервере. 
Благодаря возможностям расширения сценария на различные комбинации 
списков ваши пользователи смогут более точно проходить через несколько 
уровней опций, получая информацию или продукты, которые им требуются. 

Наконец, мы немного переработали код, создав для себя промышленный 
компонент, облегчающий потенциальное повторное использование и настрой- 
ку. По нашему мнению, мы инкапсулировали данные функциональные воз- 
можности в самодостаточный компонент, и нам никогда не придется писать 
его повторно. По мнению пользователей, исчезла вероятность получения со- 
общения "продукт недоступен" при покупках в интерактивных магазинах. 
Все счастливы. 





В этой главе... 


Опережающий ввод 


Кэширование результатов поиска 
на стороне клиента 


Библиотека Кісо 

Библиотека Ргоѓоїуре 
Функция Јауа$Ѕсгірі арриу () 
Параметризация компонентов 


Опережающий ввод является одной из основных сфер применения Адах 
благодаря которым эта инфраструктура заняла свое место в мире програм- 
мирования. Возможности Соое Ѕиореѕі впечатляют пользователей, обнару- 
живающих список предположительных вариантов того, что они набирают 
(и даже сейчас, спустя много месяцев, эта возможность все еще активно об- 
суждается). Действие этого приложения подобно работе помощника, сидя- 
щего рядом с вами и подсказывающего, что вам нужно. Одни люди думают 
что предлагаемые значения хранятся на странице, другие полагают, что для 
получения данных применяется скрытый элемент ІРгате. В действительно- 
сти Соое для извлечения новых значений после нажатия каждой клавиши 
использует объект ХМІ.НірКедџезі. 

В этой главе вы узнаете, как отправлять запросы Адах в то время, как 
пользователь что-то набирает. Кроме того, мы исследуем недостатки доступ- 
ных реализаций опережающего ввода и определим, как избежать их в на- 
шем приложении. Для начала мы примем понятный низкоуровневый подход. 
После того как наше приложение заработает, мы перейдем на высокий уро- 
вень и используем объектно-ориентированный подход, предлагающий боль- 
шую гибкость и практичность. Однако, прежде чем мы приступим к созда- 
нию приложения, давайте рассмотрим некоторые типичные составляющие 
опережающего ввода и определим, как мы будем разрабатывать приложе- 
ние, чтобы максимально использовать их. 


10.1. Изучаем опережающий ввод 


С ростом популярности инфраструктуры Ајах одной из самых модных сфер 
ее применения стал опережающий ввод. Сценарии, заранее предлагающие ва- 
рианты набираемого текста, писали многие люди, реализовывавшие различ- 
ные варианты взаимодействия с сервером. Одни решения имели свои недо- 
статки, другие подходы были чересчур агрессивными. Чтобы получить об- 
щее представление о данном вопросе, вначале оценим ряд функциональных 
возможностей, реализованных во многих приложениях упреждающих пред- 
положений, а затем кратко рассмотрим Соое Ѕиереѕї. После этого мы раз- 
работаем свое приложение. 


10.1.1. Типичные элементы приложений опережающего ввода 


В настоящее время существует множество приложений опережающего вво- 
да — от простейших до достаточно сложных. Все они преследуют одну цель, 
просто в некоторых реализованы более модные интерфейсы с затухающими 
переходами. Введите в какой-либо поисковой программе "уре-аВеаЯ ѕиореѕі 
Ајах" — и вы получите приличное число результатов. 

Изучив несколько представителей данного множества, можно заметить, 
что все они построены примерно по одной схеме. 


Таблица 10.1. Проблемы приложений опережающего ввода 
П^блема Результат 


Пообработка на сервере Чрезмерное потребление полосы пропускания. Представьте, 
после каждого нажатия какая ширина полосы требуется для обработки действий 
клавиши 1 000 пользователей, набирающих 10-символьные слова 


д.нные не кэшируются Запросы бомбардируют базу данных постоянно, даже если 
в ответ на запрос возвращаются пакеты данных, ранее уже 
передававшиеся клиенту 


Модем 56К Да, еще существуют пользователи, применяющие удаленный 
доступ по модему; для них передача информации с сервера 
будет сопровождаться заметными паузами 


Возврат слишком Если не ограничить количество результатов, клиенту будет 

большого числа отправлено чересчур много данных (соответственно 

результатов увеличится время отправки ответа) 

Слишком модный Множество "наворотов" может мешать, увеличивая время 

интерфейс визуализации 

Быстрая печать Некоторые люди способны печатать быстро. Определенные 
сценарии рассчитаны на людей, долго ищущих на клавиатуре 
нужную букву 


1. Вы набираете символ. 
2. Приложение отправляет запрос на сервер. 
3. Данные возвращаются клиенту. 


4. Клиент принимает данные и отображает результаты в таблице, элементе 
аіу, текстовом окне и т.п. 


Тем не менее существуют моменты, в которых некоторые сценарии про- 
являют себя не лучшим образом. Разработчикам следует учитывать ширину 
полосы пропускания, пропускную способность сервера, а также конфигура- 
цию клиента. Если вы забудете об этих факторах, использование Ајах может 
вызвать отрицательную реакцию пользователя (а нужна положительная).. 
Возможные проблемы, довольно распространенные в приложениях Ајах, пе- 
речислены в табл. 10.1. 

Разработчики, как правило, забывают о полосе пропускания. Даже один 
пользователь, вводящий простое слово, может несколько раз сталкиваться 
с дообработкой на сервере. Объедините это с проблемой быстрой печати, 
и число запросов в секунду станет даже больше, чем в приложениях, не ис- 
пользующих Ајах. 

Наличие оперативного интерфейса также очень важно. Чем больше вре- 
мени уходит на визуализацию средств управления, тем позже пользователь 
их увидит и тем менее эффективным будет приложение. Кроме того, возмож- 
ны задержки в работе, из-за завышенной нагрузки на сервер. Если запросы 
формируются слишком часто или возвращают чересчур много данных, по- 
страдает оперативность пользовательского интерфейса. 


Ѕиддеѕі ВЕТА 


Соосе 


\еь іадез Сющоя Мент Етоодја оса шова 


11700 000 нышат 
т.020,990 мые 
17.200.090 = 


24.200.000 тыт» 








Рис. 10.1. Ооодіе Ѕиддеѕї предлагает различные варианты после ввода буквы "е" 


Для повышения оперативности интерфейса можно каптировать данные на 
стороне клиента. (Данные можно кэшировать и на сервере, но это другая те- 
ма, более знакомая разработчикам классических Мебр-приложений.) Система 
опережающего ввода обычно возвращает тем меньше результатов, чем боль- 
ше набрано символов, причем, как правило, эти результаты входили в са- 
мый первый предложенный набор. Реализация системы "в лоб" отбрасывает 
предыдущие запросы в ответ на набор новых букв и извлекает с сервера 
новые данные. Более интеллектуальная система может оставить результаты 
первоначального запроса, отсеивая неподходящие элементы по мере ввода 
пользователем символов и обновляя пользовательский интерфейс без обра- 
щения к серверу за обработкой каждого нового символа. Такое решение улуч- 
шает приложение путем повышения оперативности и сокращения требуемой 
полосы пропускания. Мы просто обрабатываем имеющийся набор результа- 
тов, что ускоряет извлечение нужной информации и снимает необходимость 
в дополнительных этапах обработки на сервере. 

Пожалуй, хватит теории. В следующем разделе мы рассмотрим готовую 
реализацию опережающего ввода. 


10.1.2. аоодіе Ѕиддеѕі 


Некоторые люди считают Соовіе Ѕирреѕі вершиной приложений опережаю- 
щего ввода. Соое Ѕирреѕі — это быстрое, доброжелательное к пользователю 
приложение, эффективно выполняющее свою работу. На рис. 10.1 показано, 
как Соое]е 5иореѕі предлагает варианты после ввода буквы "е". 

На рис. 10.1 число предложений ограничено десятью. Зная, какой базой 
данных располагает Соое, можно было бы ожидать и миллиарды предложе- 
ний. При отборе информации, отображаемой пользователю, Соое исполь- 
зует специальный алгоритм. Чтобы понять, как работает написанный Соое 
код Јауа$сгірё, разработчики внимательно его разобрали (помните, что код 
Јауа$Ѕсгірі невозможно скрыть полностью, хотя можно запутать его анализ). 





Запрос базы данных и 
обработка результатов 





Передача форм Возврат результатов 








Ограничение Выдача 


результатов результатов 





Рис. 10.2. Архитектура системы опережающего ввода 


Одной из наиболее впечатляющих особенностей Соое Ѕирреѕі является 
поддержка быстрого набора — для ограничения числа обращений к серверу 
за короткий промежуток используются различные таймеры. Данный вопрос 
чрезвычайно важен для Соое из-за огромного числа пользователей. Боль- 
шое число обращений к серверу может порождать проблемы, кроме того, 
ограничение этого числа позволяет экономить ресурсы. 

Пример Соое вдохновляет нас (и многих других). В следующем разделе 
мы соберем лучшие из рассмотренных элементов и разработаем собственную 
схему опережающего ввода —- приложение Ајах. 


10.1.3. Ајах как средство опережающего ввода 


Средства опережающего ввода нашего приложения будут пытаться макси- 
мально уменьшить нагрузку на сервер. Небольшие сайты не могут обрабо- 
тать трафик, допустимый для Соое, Атахоп и Үаһоо!, поскольку не имеют 
мощных регуляторов распределения нагрузки и множества серверов, обраба- 
тывающих запросы. Следовательно, чем больше мы сэкономим полосу, тем 
дешевле будет эксплуатация небольших сайтов. 


Для достижения поставленной цели будем использовать сервер только 
тогда, когда нам потребуются новые данные. В этом приложении мы исполь- 
зуем основанное на сценарии взаимодействие клиент/сервер. Сервер форма- 
тирует результаты в виде выражений ЈауаЅсгірі, которые можно выполнить 
на стороне клиента. Данные, возвращаемые сервером, содержат только текст 
предлагаемых вариантов и идентификационное поле, которое мы желаем свя- 
зать с этими данными. Это идентификационное поле можно сравнивать со 
значением или дескриптором опции. Большинство сценариев не позволяет 
отправлять идентификатор; в нашем это возможно. Далее браузер обраба- 
тывает возвращенные данные как код ЈауаЅсгірі. Диаграмма этого процесса 
приведена на рис. 10.2. 


Видно, что та часть сценария, которая собственно и представляет собой 
инфраструктуру Ајах, позволяет захватывать данные с сервера. Сервер воз- 
вращает клиенту текстовый документ, содержащий выражение ЈауаЅсгірї. 


Клиент обрабатывает данные, содержащиеся в этом выражении, и проверяет 
имеются ли в них искомые результаты. Если да. то пользователю предлагав 
ются на выбор несколько вариантов. Все кажется просто, пока вы не заду, 
маетесь о том, сколько кода ЈауаЅсгірі задействовано в описанном процессе 
Впрочем, если разбить процесс на ряд небольших этапов, задача написание 
сценария опережающего ввода с минимальной нагрузкой на сервер оказы- 
вается сравнительно простой. В данном проекте самым простым будет код 
серверной части приложения, поэтому начнем мы именно с него. 


10.2. Структура серверной части сценария: С# 


Схема опережающего ввода, которую мы будем разрабатывать, состоит из 
трех частей: сервера, базы данных и клиента. На практике база данных 
может представлять собой, например, ХМГ-файл, но общая суть от этого 
не меняется. 


10.2.1. Сервер и база данных 


Код сервера и базы данных можно писать одновременно, поскольку соеди- 
нение с базой данных нам требуется только для получения информации. 
В данном примере мы используем базу данных М№Могіһжуіпа (Місгоѕоћ), полу- 
чая необходимые данные из таблицы Ргойисіѕ, однако вы можете работать 
с любой удобной для вас базой данных. 

Для отправки запроса от клиента серверу и получения в ответ отфор- 
матированной структуры данных нужен объект ХМЕНИрКВеаче$. В нашем 
случае динамически создается текстовый документ, заполняемый информа- 
цией, полученной из запроса к базе данных. Этот текстовый документ будет 
содержать код Јауа$Ѕсгірі, создающий массив с данными. Основные этапы 
создания массива ЈауаЅсгірі приведены в листинге 10.1, 


Листинг 10.1. Сценарий їуреАһеаараїа.аѕрх.сѕ 
// О Инициализировать код при загрузке страницы 
рг!уа{е уоіа Раре Гоаа(објесі зепаег, 
Ѕуѕѓіет.ЕуепїАгеѕ е) 
{ 
// @ Установить тип содержимого 
Кеѕропѕе.СопіепіТуре - "ЕехЕе/ЮЕт1"; 
// © Запросить элемент формы 
зЕхлпа зЕкОцеку = 
Веааезе.Еоги.Сее ("а") .Тобігіпд(); 
ѕігіпо ѕЕГАпу = ""; 
// О Объявить строку 
1Е (Кесчеѕі .Рогт.Сеї ("иһеге") .ТоІоиег () 
== "Сгоае") 





ѕЕГАпу = "$"; 
} 
// © Построить выражение 501 
ЗЕх1па в6хба1 = "Ѕбеіесі вор 15 " + 


Глава 10. Опережающий ввод 387 





"РгоаосёМаме, " + 
"Ргоаосё1а РВОМ Ргоаџсёѕ " + 
"ИНЕВЕ РкоаосЕМаше 1іке '" + 





ЗЕхАПУу + ѕігОџегу + "%" 
'" ОВОЕВ ВУ РгоацсіМапе" ; 
// 0 Инициализировать запрос к базе данных 
РасаТаю1е аёОџеѕііопѕ = Рі11раёатар1е ( 
$6х5а1); 
// © Построить массив ЈауаЅсгірі 
бузсем. Техе .5Ех1паВо11Чег ѕігЈЅАгГ = 
пет бузсем.Техе. Е х1лпаВи11аек ( 
"аггорёіопѕ = рем Агкау ("); 
106 іСоџпё = 0; 











// © Последовательно пройти по результатам 
Ғогеасһ (ПабаВом гом іп 
АЧЕОцезЕ1от$.Вомз) 


1Е (1іСоопб > 0) А 

{ ЗЕГОбАгх.Аррепас',"); } 
5ЕгЈЅАГГ.Аррепа("["); 
зЕгЈЅАгг.Аррепа ("\"" + 





гот [ "РгодисЕМаме"] .Тоѕігіпо() + "\","); 
5ЕГЈЅАгг.Аррепа ("\"" + 

гом [ "Ргоаџсёіа"].Тобігіпод() + '\''] 
зЕгОбАгк.Аррепа ("]"); 
іСоопі++; 


И 


зЕг9бАгх.Аррепа(");"); 
// О Записать строку на страницу 
Везропзе.ИМх1ее (56 гОбАгх.Тобег1ра ()); 


и 
} 


// © Выполнить запрос 
рчр1іс ѕёаёіс рабатТар1е 
Р1і11рабаТар1е (ѕёгіпо ѕа10иегу) 
{ 
зЕхлпа ѕігСопп = "Іпіііа1 Саёа1од = "+ 
"Мохеһуіпа; Раба Ѕоџгксе=127.0.0.1; " 
"Іпёедгаёейа Ѕесигііу=ёгие; "; 
Ѕа1Соппесііоп сопп = пеи $91Соппесёіоп (ѕзікСопп); 
ѕа1раёадааріег стаі = пем Ѕа1раіёадааріег () ; 
спа1.ЅеіесЕСоппапа • пем ѕа1 Соппапа (за1Оцегу , сопп); 
Гаёабеё ааёсабеё1 = пем раёсабеёо; 
спа1.ғ111 (Чак а$еЪ 1); 
іспа1.різѕроѕе(); 
сопп.С1іоѕе(); 
геїогп ЯаѓаЅеї1.ТаБ1еѕ[0]; 


Код, приведенный в листинге 10.1, позволяет получать значения от кли- 
ента и передавать данные в строку, формируя массив ЈауаЅсгірі. Этот массив 
возвращается клиенту и обрабатывается. Данное поведение требуется иници- 
ализировать при загрузке страницы документа О. Первое, что мы делаем 
после возврата строки, — проверяем, что тип содержимого страницы уста- 
новлен равным їехі/һіті ©. 


Код клиентской стороны помещает значения на нужную страницу посред, 
ством объекта ХМЕНИрКеаие$. Следовательно, мы должны запросить в эле- 
менте формы а текст, представляющий предположительные варианты ввода 
©. В отличие от многих схем опережающего ввода, мы позволяем пользова- 
телям находить результаты в середине слова, поэтому объявляем строку о 
отвечающую за обработку такой ситуации. Сценарий клиента передает булеву 
строку с элементом формы \Пеге. Если ее значение равно їгие, мы добавляем 
% перед началом термина, чтобы разрешить поиск с любого места строки 

Теперь мы можем сформировать выражение 501. ©, которое позволит 
получать из базы данных значения, соответствующие тому, что вводит поль- 
зователь. Чтобы минимизировать нагрузку на пользователя, мы ограничим 
поиск: возвращать можно всего 15 значений. Затем мы инициализируем © 
процедуру запроса базы данных © и возвращаем таблицу данных с доступ- 
ными результатами поиска. 

Получив результаты из базы данных, можно формировать массив 
Јауа$сгірі О. Затем мы циклически проходим по множеству записей ©, со- 
здавая двухмерный массив с именами вариантов и идентификаторами. После 
завершения цикла мы пишем нашу строку на страницу ©, чтобы ее могло ис- 
пользовать выражение ЈауаЅсгірі. 

Если вы используете серверный язык со страницей кода и НТМГ- 
страницей, то с НТМГ-страницы необходимо удалить все дополнительные 
дескрипторы. Если используется такая же страница С#, как в нашем при- 
мере, на АЗРХ-странице должен присутствовать единственный указанный 
ниже дескриптор. - 5. 


<® Раве Гапвџаве="с#" Ашо Еуепігеир="Ға1Іѕе" \ 

Соаебеһіпа="ТуреАһеаахмі.аѕрх.сѕ" 

Ілћегііѕ="СһарѓеПОС.ТуреАһеаа{хмі"%> 

Если мы не уберем дополнительные дескрипторы НТМГ, которые по 
умолчанию присутствуют на АЅРХ-странице, мы не получим допустимый 
текстовый файл (с кодом Јауа$сгірї), т.е. наши методы РОМ ЈауаЅсгірі не 
смогут использовать данные. Чтобы гарантировать правильность данных, 
которые возвращаются клиенту, необходима быстрая проверка. 


10.2,2. Тестирование серверного кода 


При работе с Ајах тестирование серверного кода необходимо, поскольку 
Јауа$сгірі известен своими проблемами, причины которых часто бывает труд- 
но обнаружить. Консоль ЈауаЅсгірі от Мох Ша улучшает ситуацию, но чтобы 
минимизировать шансы на ошибку всегда стоит проверять корректность ра- 
боты сервера. 

При тестировании серверного кода можно пойти двумя путями. Посколь- 
ку объект ХМІ.НірКедиеѕї использует метод НТТР РОЅТ, мы можем либо 
создать простую форму с двумя текстовыми окнами и отправить ее на сер- 
верную страницу, либо закомментировать строки, проверяющие отправку 
формы, и задать в этом месте некоторые значения. Выберем второй вари- 
ант. Как видно из фрагмента кода, приведенного в листинге 10.2. мы заком- 











этОриопз = пех Аггау(["Аћсе МиНоп',*17*], ГАлвееё Ѕугур","3')[Вожол Стаб 
Маг, "40" ["Саклеоьей Ризлое, "60", ["Саглагтов Тег", "18*]["Съаг",^1"], 
(“СЪаля“, "2" ["СБалуецее уепе", "39" ] ["СъеЁ Аліопо Садо Зеазошав”,*4"]|["СЪеЁ 
Амоп'з Сиио №х”,"5"],["Свосоаде" ^48"] ["Сӧте ае ВАзуе","38"]["Езсаксоз де 
Вошеяовле",*58"] ["Споссъ & поппа Абсе", 56"), ["Согропгоіа Теко",*31*7), 


Рис. 10.3. Строка Јауа5стірї, получаемая при тестировании на выходе 
серверной страницы 


ментировали операторы запроса формы, заменив их жестко закодированны- 
ми значениями. 


Листинг 10.2. Фрагмент кода для тестирования 
//зЕхлра зЕхОцеку = 
Кеаоеѕі .Гогт. бе ("а") -Тоѕігіпо (); 


ѕікіпо ѕігОџегу = "а"; 
ѕігіпо ѕЕгАпу = ""; 
//1Е (БКесиоеѕё .Еогт.Сбеё ("уфеге") .ТоГоиег () =- "Егие") 
1/4 
ЗЕхАпу = "$"; 
//} 





В данном коде запрограммирован поиск всех слов, содержащих букву 
"а". Следовательно, при его выполнении объявление массива ЈауаЅсгірі вы- 
глядит так, как показано на рис 10.3. Мы видим, что приведенная строка 
выглядит правильно. Таким образом, комментарии и строки с присвоением 
значений можно убирать и продолжать написание сценария опережающего 
ввода. Возможно, вам интересно, где же выполняется кэширование данных, 
возвращаемых с сервера. За это отвечает сторона клиента. Сервер вызыва- 
ется только раз: когда вводится первый символ или когда число результатов 
больше или равно 15. Нет никакого смысла запрашивать данные, если мы 
получим подмножество данных, полученных ранее. 

Таким образом, мы завершили создание серверной части кода и перехо- 
дим к клиентской. 


10.3, Структура клиентской части сценария 


Каркас клиентской части сценария содержит объект Ајах, именуемый ХМІ- 
НирКедоеѕі, и много ОНТМГ-кода. Начнем с создания текстовых окон. 


10.3.1. НТМЕ 


Используемый НТМІ-код очень прост, поскольку мы работаем всего с тре- 
мя элементами формы: двумя текстовыми окнами и скрытым полем. Первое 
текстовое окно представляет собой элемент формы с предложениями по опе- 
режающему вводу. Скрытое поле принимает значение элемента, выбранного 


пользователем из предложенных вариантов. Второе текстовое окно проем 
не дает отправить форму на дообработку на сервер при нажатии клави- 
ши <Ещег>. По умолчанию в форме с одним текстовым полем с клавишей 
<Ещег> соотнесена отправка формы. Самый простой способ отказаться от 
такого поведения — добавить на страницу второе текстовое поле. Если вы до. 
бавляете опережающий ввод на страницу, содержащую несколько элементов 
формы, дополнительное окно вам не требуется. Таким образом, мы приходи^ 
к общей структуре НТМТГ-документа, показанной в листинге 10.3. 


Листинг 10.3. Структура НТМІ-страницы с опережающим вводом 

<Еоги папе="Роги1" АОТОСОМРІЕТЕ= "ОЁЁ" Ір= "Богтмі"> 
АпсоСопр1есе Техі Вох: <іприі ёуре= "ёехі" пате= "ЕхЕ0ѕегІприё" /> 
<іприё іуре= "Һіааеп" паме=" Е хеОзех\Уа1ае" 1р= "Һіааеп1" /> 
<іприі суре="сехе" патме= "Ехе1одпоге" ѕёу1е="Яіѕр1ау: попе" /> 

</ Еогт> 








В листинге 10.3 мы добавили форму с отключенным автоматическим за- 
полнением. Нам пришлось так сделать, чтобы браузер не помещал значе- 
ния в поле при первой загрузке страницы. Описанная возможность очень 
удобна, но в данном случае она нарушит нашу схему опережающего ввода. 
Обратите внимание на то, что приведенный фрагмент используется только 
в Іпѓегпеї ЕхріІогег и не дает встроенным раскрывающимся спискам автоза- 
полнения взаимодействовать с нашими раскрывающимися списками ОНТМГ. 
Другие браузеры данный атрибут проигнорируют. Кремле того, мы добавили 
текстовое окно {х{изег1при{, скрытый элемент 1х ОзегУаше и ложное тек- 
стовое окно {х поте. С окном 1х поге, используемым для предотвраще- 
ния автоматической отправки формы, также соотнесен стиль С$$. согласно 
которому это окно невидимо. Данный результат можно получить и другими 
способами, но предложенный нами вариант является самым простым и быст- 
рым решением. Итак, мы добавили в форму текстовые поля и можем писать 
код Јауа$Ѕсгірі. 


10.3.2. Чауа$спрЕ 


Код ЈауаЅсгірі приложения с опережающим вводом выполняет три основ- 
ные задачи. 


• Наблюдение за действиями пользователя (вводом с помощью клавиатуры 
и мыши). 
• Отправка данных на сервер/получение данных с сервера. 


• Формирование НТМІ -содержимого, с которым может взаимодействовать 
пользователь. 


Прежде чем мы начнем кодирование, стоит подробнее остановиться на 
том, что же мы собираемся получить. 

Когда пользователь набирает букву, становится видимым скрытый эле- 
мент ѕрап с информацией, имеющей отношение к набранной букве. На 





Рис. 10.4. Приложение опережающего ввода в действии 


рис. 10.4 во всех вариантах подчеркнута буква "а" — буква, присутствующая 
в текстовом поле. Первая позиция списка выделена. Нажимая клавиши со 
стрелками вверх и вниз, можно выделять другие позиции. Нажав клавишу 
<Ещег>, вы выберете выделенный вариант. Кроме того, нужную позицию 
можно выбрать, щелкнув на одном из слов списка. 

Из-за сложности сценария объяснение может выглядеть немного непо- 
следовательным, поскольку для реализации опережающего ввода требуется 
множество функций. Одна из этих функций отслеживает ввод с клавиату- 
ры, вторая — загружает текст и код ЈауаЅсгірі, третья — создает список, 
четвертая — подчеркивает набранные буквы и т.д. Для удобства вы може- 
те загрузить код этого сценария с У\еБ-сайта книги и изучать его в своем 
любимом редакторе. 


Добавление внешнего файла ЈауаЅсгірї (Ајах) 


Чтобы добавить в наше приложение функциональные возможности Ајах, мы 
должны включить в дескриптор заголовка внешний файл ЈауаЅсгірі пеї.јѕ 
(см. главу 3). Этот файл содержит объект Сот(еп .оааег, позволяющий ини- 
циировать запрос Ајах без всяких проверок 1#-е15е. 


<5$ст1рё їуре="ехіјауаѕсгірі" ѕгс="пеї.јѕ"> < /ѕсгірі> 


Чтобы присоединить внешний файл, мы добавляем дескриптор ЈауаЅсгірі 
и включаем атрибут ѕгс, задающий внешний файл. Ссылка на файл органи- 
зовывается точно так же, как ссылка на изображение или файл С$5. На- 
званный файл определяет, как отправлять информацию на сервер, скрывая 
весь зависящий от браузера код за удобным интерфейсным объектом. Таким 
образом, мы сможем отправлять и извлекать данные с сервера, не обновляя 
страницу. Подключив данный файл к нашему проекту, мы можем начинать 
разработку опережающего ввода. 


Выходной элемент ѕрап 


На рис. 10.4 показано серое окно, содержащее все доступные варианты. Эт, 
окно представляет собой элемент зрап НТМІ, который динамически Быстра. 
ивается точно под текстовым окном. Вместо того чтобы добавлять на страни- 
пу элемент зрап всякий раз, когда нам потребуется использовать сценарий 
мы можем добавить его на страницу из сценария. 

В листинге 10.4 мы создаем новый элемент ѕрап с помощью РОМ при 
загрузке страницы (событие оШоаа). Мы вставляем зрап в страницу НТМЕ 
с идентификатором зрапОп(ри{ и именем класса С55 зрап Техё Югорӣожп. За- 
тем к телу документа присоединяется новый дочерний элемент — зрап. До- 
бавленная нами ссылка класса С$5 позволяет так присваивать правила, что- 
бы мы могли динамически размещать элемент зрап на странице. Поскольку 
нам придется динамически изменять его положение на экране в зависимости 
от расположения текстового окна, в соответствующем классе С$5$ мы задаем 
абсолютное позиционирование. 


Листинг 10.4. Код Јама5сгірї, отвечающий за вывод списка на экран 


міпаӢоут.оп1оаа = Ёопсіёіоп () { 
уаг е1епбрап = доситепё . сгеаёеЕ1епмепі ("зрап"); 
е1етЅрап.іа « "ѕрапоиёриё"; 
е1етбрап.с1аззМаме = "ѕраптТехіёргораӢоип"; 
аосцмепе . роду . аррепасһі1а (е1ембрап); 











Для динамического добавления элемента ѕрап на страницу использует- 
ся обработчик событий опоаа. Благодаря этому нам не требуется вручную 
добавлять этот элемент на страницу г>ри каждомчиспользовании сценария. 
Для создания списка применяется метод РОМ, именуемый сгеайе етепе. 
Затем нам нужно присвоить нашему новому элементу зрап идентификатор 
ІШ и атрибут сІаѕѕ Мате. Создав эти атрибуты, мы можем добавить элемент 
на страницу. Теперь создадим класс С55 (листинг 10.5), который позволит 
динамически располагать элемент на странице. 


Листинг 10.5. Класс С55 для раскрывающегося списка 


ѕрап. ѕзрапТехіргораоуит { ро$1Е1оп: абзо1аее; 
Сор: Орх; 
ІеҒё: Орх; 
міаєһ: 150рх; 
2-іпаех: 101; 
раскагоцпа-со1ог: #С0СОСО; 
рогаег: 1рх зо11а #000000; 
раааіпд-1еЁё: 2рх; 
оуегЁ1ои: уіѕір1е; 
аіѕр1ау: попе; 


— 2 





Изначально элемент ѕрап располагается в произвольной точке экрана, 
заданной с помощью параметров фор и 1ей. Мы задаем ширину элемента 


д, умолчанию и устанавливаем значение свойства 7-шаех, соответствующее 
самому верхнему слою страницы. Правило С$$ также позволяет определять 
тиль фона и границу нашего списка, чтобы он выделялся на странице. Свой- 
ство ӣіѕрІау задается равным попе, поэтому наш элемент невидим пользова- 
телю в момент первоначальной загрузки страницы. Как только пользователь 
начинает вводить данные в поле с опережающим вводом, свойство 415р1ау 
меняется, поэтому мы можем увидеть результаты. 


Связывание с текстовым окном структуры опережающего ввода 


Поскольку возможности опережающего ввода могут нам понадобиться 
в нескольких полях, необходимо придумать, как приписать различным эле- 
ментам различные свойства. Данные свойства определяют реакцию сцена- 
рия. Мы задаем их так, чтобы текст сопоставлялся с учетом регистра, срав- 
нивались вес элементы текста, предусматривалось время ожидания, а так- 
же выполнялись другие условия, которые мы опишем ниже. Чтобы достичь 
желаемого, можно создать объект, содержащий все необходимые параметры, 
уникальные для отдельного текстового окна. В таком случае, когда текстовое 
окно будет находиться в фокусе, мы сможем обращаться к объекту, присо- 
единенному к элементу, и получать необходимые настройки. В листинге 10.6 
показано, как создать новый объект, позволяющий организовать список па- 
раметров, которые мы приписали текстовому окну. 


Листинг 10.6. Создание индивидуального объекта 
Ғопсіёіоп ЅеёРгорегііеѕ (хЕ1ем, хН1ЯАаеп , хзегуехкСоае, 
хісдпогеСаѕе, химаесрАпуутеге , хптаёсһтТехіёВохиіаёһ, 
хѕеһои\омМаєсћМеѕѕаде, хпоМаёсһіпдраёамеѕѕаде, хиѕетітюеоиі, 
хіһеуіѕір1етітме) { 
уаг ргорѕ= { 
е1ет: хЕ1ет, 
Һ1іааеп: хнідадаеп, 
ѕегуегСойе: хѕегуегСоае, 
гедЕхғ1адѕ: { (хідпогеСаѕе) ? "1" : "" ), 
гедЕхАпу: ( (хпабсрАпууреге) ? "": "8" ), 
паёсҺАпумһеге: хпаєсҺАпууһеге, 
таєсһтТехёВохиіаёһ: хпаєсһтТехіВохіаёһ, 
сћҺеуіѕір1етТіте: хЕҺеуіѕір1етТіте, 
ѕћһои\оМасһМеѕѕаде: хѕһоуи\оМаёсҺһМеѕѕаде, 
помМаєсһіпдраёамеѕѕасде: хпомМаёсһіподрасамеѕѕаде, 
оѕеТімеооі: хиѕетітеоиі 
18 
Ааанапа1їег (хЕ1ет) ; 
гесогп ргорѕ; 



































Первым шагом при создании наших объектов для опережающего ввода 
является написание новой функции ѕеїРгорегііеѕ (), которая может присва- 
ивать свойства объекту. В данном примере мы будем передавать этой функ- 
ции несколько параметров. В их число входит текстовое окно, с которым 
соотнесено средство опережающего ввода; скрытый элемент, используемый 


для хранения значения; указатель ОКІ. на страницу сервера, булева пере- 
менная, указывающая игнорировать регистр при поиске; булева переменная 
указывающая искать текст в любом месте строки; булева переменная, указы- 
вающая отображать сообщение "нет соответствий"; отображаемое сообщение- 
булева переменная, определяющая, следует ли скрывать варианты по проше- 
ствии указанного периода времени; а также временной интервал, в течение 
которого демонстрируются варианты. 

Описанный набор параметров слишком велик, чтобы передавать его 
функции. Мы должны взять эти параметры и присвоить их нашему объек- 
ту. Для этого используем форму записи ЈауаЅсгірі Објесі МоаНоп (Ј850М№) 
которая подробно описана в приложении Б. Ключевое слово определяется пе- 
ред двоеточием, затем следует значение. Трактовка параметров івпогеСаѕе 
и тасһАпумһеге несколько сложнее. Вместо хранения булева значения мы 
записываем в свойство эквивалентное регулярное выражение. В данном слу- 
чае мы используем символ і для обозначения "игнорировать регистр" и " — 
для отметки начала строки в регулярных выражениях. Выбор такого подхода 
объясняется тем, что нам проще задать параметры регулярных выражений, 
чем использовать оператор і? при каждом вызове функций. 


Последним действием нашей функции является связывание с текстовым 
окном обработчиков событий. В данном примере мы вызываем функцию, ав- 
томатически добавляющую обработчики событий. Код этой функции будет 
приведен чуть ниже, а пока вызовем функцию ЅеїРгорегііеѕ() для созда- 
ния нашего объекта. Код, приведенный в листинге 10.7, выполняется обра- 
ботчиком события опоаа (загрузка страницы) и позволяет задавать свойства 
текстового окна. 


Листинг 10.7. Инициализация сценария, .Щ^^^^^ШЯ 
улидо\/ ошоа4 = Рпсйоп(){ 

уаг @епл5рап = доситепї. стеце етеп((" ѕрап"); 

ејетрапіа = "зрапОшрие"; 

ејет8рап.сІаѕ Мате = "рапТехОтордо\мит", 

доситеп.Боду.а ре тит Косто рап) 

аоситепі. Ео хіОѕейприё.обј = 

ЅеіРгорегіеѕ(дӢоситепі. Рогті.іхіОѕегприќ, 
аоситепї. Рогті.іх(ЈѕегУаіџе, уреАһеааРдайа. аѕрх', 
{тие ,ігие ігие,ігие,"№о гтаќс Бака" Ёа]ѕе, пш); 


Обработчики событий должны быть заданы при загрузке страницы. Сле- 
довательно, мы должно присвоить их обработчику событий уіпаож.опіоаа, 
который мы создали ранее для добавления нового элемента ѕрап. В данном 
тримере мы используем только одно текстовое окно с опережающим вводом. 
Цалее нам потребуется обратиться к элементу формы, с которым мы желаем 
связать возможности опережающего ввода, и добавить к нему новое свойство 
>6ј. Вместо того чтобы использовать глобальные переменные, присвоим дан- 
гому свойству наш индивидуальный объект, чтобы для получения значений 
с нему можно было обращаться из сценария. 
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В качестве ссылки используется функция ЅеїРгорегііеѕО. Затем мы 
присваиваем все параметры, созданные в листинге 10.6. Здесь важно от- 
ветить, что мы ссылаемся на два элемента формы, созданных в листин- 
ге Ю.3, и вызываем серверную страницу їуреАһ.еайраїѓа.аѕрх, созданную 
в листинге 10.1. Теперь, когда обработчик опіоаа инициализировал про- 
цесс, мы можем добавлять обработчики событий, которые вызывает функ- 
ция ЅеїРгорегііеѕО- 


Обработчики событий 


Чтобы мы могли определить действие пользователя, выполненное в тексто- 
вом окне, и предложить варианты опережающего ввода, требуется добавить 
к форме обработчики событий. В связи с этим нужно знать два основных 
момента: набирает ли пользователь что-либо на клавиатуре, и завершил ли 
он работу с текстовым полем. Для детектирования действий пользователя 
мы используем обработчики событий, приведенные в листинге 10.8. 


Листинг 10.8. Добавление обработчиков событий, - · ; 
уаг 
15 Орега= (пауіваїіог-иѕегАвепі.іоГожмегСаѕе(). ш4ехОЁ{"орега")!= -1); 
Ғопсііоп АдаНапег(о6]Техи){ 
об] Тех{.опкеуир = СіуеОрііопѕ; 
ов] ТехЕ.оп6 г = Ёопсііоп()!/ 
і(#ћ15ѕ.обј.иѕеТітеоої) $їагіТітеоиі(); 
1 
1(15Орега)објТехі.опкеургеѕѕ = СіуеОрііопз; 





Листинг 10.8 начинается с выражения, определяющего используемый бра- 
узер. Вообще, в данном примере мы будем несколько раз использовать детек- 
тирование браузера, поскольку Орега детектирует ввод с клавиатуры не так, 
как другие браузеры. Указанный способ позволяет проще всего выяснить, ис- 
пользуется ли в качестве браузера Орега, но он является не самым надежным, 
поскольку может имитировать поведение других браузеров. 

Наша функция АЗаНап ет () получает ссылку на текстовое окно. Эта 
ссылка позволяет добавлять к элементу обработчики событий опКеуир и оп- 
г. Обработчик событий опКеуир запускает функцию СбіуеОріопѕ () при 
отпускании клавиши клавиатуры. Следовательно, когда пользователь наби- 
рает пятибуквенное слово, функция СіуеОріопѕ запускается пять раз при 
отпускании клавиш. 


Обработчик событий оп г, который мы связали с текстовым окном, вы- 
зывает функцию ЅїагіТітеоиї () (она представлена в листинге 10.19) в тот 
момент, когда текстовое окно выходит из фокуса. Действия, вследствие кото- 
рых окно может потерять статус находящегося в фокусе, включают щелчки 
на других частях экрана или нажатие клавиши <ТаБ>. 

Почему мы особо обратили внимание на детектирование браузера Орега? 
Дело в том, что он не так реагирует на обработчик событий опКеуир, как 
другие браузеры, — при срабатывании опКеуир Орега не показывает значе- 
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ние в текстовом окне, в которое в текущий момент вводится текст. Прооте\щ 
решается добавлением обработчика событий опКеургеѕѕ. Из приведенного 
кода видно, что мы проверили используемый браузер с помощью булевой 
переменной іѕОрега, а затем присвоили текстовому окну обработчик собы- 
тий опкеургез$. Благодаря этому обработчику событий Орега служит нашим 
целям так же, как и другие браузеры. Поскольку теперь мы можем детек- 
тировать то, что пользователь вводит с клавиатуры, мы можем определить 
какие действия требуются в функции СлуеОрНоп$ (). 


Обработка нажатия клавиш 


Мы собираемся создать функцию СиуеОрНопз (), которая вызывается при 
нажатии клавиш. Основных задач у этой функции две: определить действие 
в зависимости от нажатой клавиши и решить, требуется ли использовать Ајах 
для получения данных с сервера или можно задействовать уже имеющуюся 
информацию. Таким образом, функция СіуеОріопѕ () требуется для того 
же, что и кэширование данных, рассмотренное в разделе 10.1.1. Используя 
для обработки дополнительных нажатий клавиш клиентский код, мы умень- 
шаем потребление полосы пропускания приложением опережающего ввода. 
Чтобы реализовать кэш доступных вариантов, установим на стороне клиента 
несколько глобальных переменных. Список глобальных переменных, с кото- 
рых мы начнем нашу работу, приводится в листинге 10.9. 


Листинг 10.9. Глобальные переменные, используемые в проекте 


уаг аггорёіопѕ = пеи АггауЕЁ); 

уаг зе гГазЕ\Уа1ае = ""; 

уаг БМааеКкеачоеѕі; 

уаг ЕёһеТех Вох; 

уаг орјІаѕёАсііуе; №2 
уар соиггепіуа1іпџеЅе1іесёеа = -1; \ 
уаг БМоВезо1е$ = Еа15е; \ 
уар 1$Т1тлра = Ға1ѕе; \ 








Первая глобальная переменная — аггОрііопѕ — ссылается на массив, ко- 
торый содержит все доступные опции из запроса сервера. Следующая пере- 
менная — $&гГаз{Уаше — содержит последнюю строку, которая находилась 
в текстовом окне. Переменная БМайеКедиеѕі представляет собой булеву мет- 
ку, благодаря которой мы узнаем, что запрос уже отправлен серверу (поэтому 
нам не нужно отправлять дополнительные запросы). Эта метка подходит для 
решения проблемы быстрого набора, поэтому нам не нужно вводить специ- 
альные таймеры, как в Соое Зи5е$1. 

Переменная #ћеТехіВох будет содержать ссылку на текстовое окно, нахо- 
дящееся в фокусе, а оБјіаѕіАсііуе — ссылку на последнее активизирован- 
ное текстовое окно. Таким образом определяется, требуется ли обновление 
набора данных при переключении пользователем текстовых окон. В нашем 
примере видимое текстовое окно всего одно, но если данное решение будет ре- 
ализовано в окне с несколькими текстовыми окнами, нам потребуется знать, 
какое из них находится в фокусе. Следующая переменная. сиггеп(Уаше5- 
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эгесе4, действует подобно переменной ѕе1есіеаіпаӣех списка. Если ее зна- 
чение равно -1, не выбирается ничего. Последняя необходимая на текущий 
иомент переменная — булева БМоКези[{5. Посредством этой переменной со- 
общается, что результатов нет, поэтому мы можем их не искать. Переменная 
^Тиишя позволяет определять, запущен ли таймер на странице. Этот тай- 
мер нужен для того, чтобы скрыть от пользователя предлагаемые варианты 
„ период бездействия. 

Возможно, вы не совсем поняли роли всех этих глобальных переменных, 
но. начав их использовать, вы разберетесь с ними лучше. Ссылаясь на эти 
глобальные переменные, мы можем создать функцию СіуеОрііопѕО, кото- 
рая вызывается при нажатии клавиш в текстовом окне. Функция СіуеОр- 
110п5(), приведенная в листинге 10.10, позволяет определять действие, ко- 
торое пользователь произвел в текстовом окне. 


Листинг 10.10. Код Јамабсгірї, отвечающий за детектирование нажатия клавиш 
//О Детектировать нажатие клавиши 
Ғопсёіоп Сіуеорііопѕ (е) { 

уар іпЕКеу < -1; 

1Е (иіпаоум.еуепё) { 











іпіКеу = еуепі .КкеуСоае; 
спетехЕВох = еуепі .ѕгсЕ1Іепепё; 
еіѕе{ 


іпіКеу = е.иһісһ; 
спетехЕВох = е.ёагдеі; 
} 
// © Обновить таймер 
ТЕ (ЕҺеТехіВох.орј .чзеТ1меоц®) { 
1Е (15Тітіпа) ЕгаѕеТітеооё (); 
бёагітітеоиї (); 








} 
ТТ © Проверить, существует пи текст 
1Е (СБетехеВох.уа1ае.1епаЕВ == 0 
&& !1ѕОрега) { 
асгОрііопѕ = пем АггауО; 
НіаетћевВох () 
ѕік1аѕёуа1џе = ""; 
геёцгп Ёа1ѕе; 
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} 
// О Определить функциональные клавиши 
іҒ (орјЈІаѕёАсёіуе == ёһеТехіВох) ( 
іЁғ(іпЕКеу — 13) { 
Сгарнідћ1ідћёеа(); 
сҺеТехіВох.ріицг(); 
тебогп Еа15е; 
} 
е1зе іЁ(іпЕКеу == 38) { 
Моуенідћ1ідһі (-1); 
геёцогп Ға1ѕе; 
} 
е1зе іЁ(іпЕКеу == 40) { 
Моуенідћ1ідһё (1); 
геіџгп Еа15е; 


// © Обработать действия, соотнесенные с нажатиеы клавиш 


1Е (орјІаѕёАсёіуе != ёһҺеТехіВох || 
сћеТехіВох.уаіпе 
.1паехо# { зіг1аѕіуа1џе) != 0 || 


((агхоріёіопѕ, 1епоёһ==0 || 

аггорёіопѕ.1еподёһ==15 ) 

55 ІрМоКеѕи1іёѕ) || 

(ЕҺеТехіВох.уа1пое. Іепоёһ 

<= ѕЕгаѕёуа1пое. 1Іепоёһ)) { 

орјІаѕёАсёіуе = ЕҺеТехіВох; 

ЪМааеВесаезЕ = Егое 

ТуреАһеаа (ёһеТехіВох.уа1ое) 
} 
е1зе 1ЕЕ!ЮМааеВесоез®) { 

Воі1аі 56 (ЕВеТехЕВох.уа1ае); 








// ® Записать то, что ввел пользователь 
зЕгГазЕ\Уа1ае = ЕБеТехЕВох.уа1ае; 








Если пользователь набирает слово, то наша функция либо начинает но- 
вый поиск, проверяя через сервер наличие соответствующих данных, либо ра- 
ботает с кэшированным набором результатов. Если извлекать новые данные 
с сервера не требуется, вызывается функция Виі1а11510О, ограничивающая 
набор результатов. Подробнее данный вопрос рассмотрен ниже, в разделе 
"Создание окна результатов". 

Функция СіуеОрііопѕО объявляется с параметром е, что позволяет де- 
тектировать источник события. Прежде всего нам нужно объявить локаль- 
ную переменную іпіКеу, содержащую код нажатой пользователем клавиши 
О. Чтобы определить, какая клавиша нажата, необходимо узнать, какой ме- 
тод нужен для работы выбранного пользователем браузера. Если поддержи- 
вается свойство уш4о\.еуе — мы имеем дело с Пицегпе{ Ехр]огег. Чтобы по-' 
лучить код клавиши, применяется свойство еуеп(. кеуСоае, а для получения 
объекта, соотнесенного с текстовым окном, — свойство еуепі.ѕгсЕІетепі. 
Для получения кода клавиши в других браузерах применяется параметр 
е.мһісһ, ссылка на объект текстового окна находится с помощью е.їіагвеї. 

Далее нужно проверить, использует ли текстовое окно таймер, согласно 
которому окно скрывается через некоторое время ©. Для этого необходимо 
обратиться к свойству об] текстового окна (мы создали его ранее) и буле- 
вой переменной џиѕеТітеоиѓ. Если таймер запущен, мы останавливаем его 
и перезапускаем, вызывая функции ЕгаѕеТітеоџё() и 8$(агіТітеооі() (мы 
напишем их в разделе "Использование таймеров ЈауаЅсгірі"). 

Затем мы проверяем, имеется ли что-либо в текстовом окне ©. Если окно 
пусто, вызываем функцию НійеТһеВохО (разрабатывается в разделе "Уста- 
новка выбранного значения"), устанавливающую значение $1гГа$(Уаше рав- 
ным па, и возвращаем значение Ѓа1ѕе, чтобы выйти из функции. Если тек- 
стовое окно содержит текст, мы продолжаем выполнять функцию. До того 
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как мы начнем детектирование клавиши со стрелками и <Ещег>, мы должны 
убедиться, что текущее активизированное текстовое окно совпадает с послед- 
ним активизированным текстовым окном. 

Первой клавишей, за нажатием которой мы должны следить, является 
<Епѓег>. имеющая код 13 О. Нажатие клавиши <Е1{ег> позволит нам захва- 
тить значение выбранной позиции раскрывающегося списка и поместить его 
Б видимое текстовое окно. Таким образом, мы вызываем функцию СтаБЬНіеһ- 
Изв {е4() (ее мы тоже напишем в разделе "Установка выбранного значения"). 
После этого мы снимаем фокус с текстового окна и выходим из функции. 

Далее нам требуются клавиши со стрелками вверх и вниз, имеющие коды 
38 и 40 соответственно. При нажатии клавиш со стрелками выделение пози- 
ции перемещается вверх-вниз по списку. Выделение, показанное на рис. 10.4, 
имеет вид темно-серой полоски. Нажав клавишу со стрелкой вниз, можно 
выделить следующую позицию списка. Подробности реализации этого про- 
цесса рассмотрены ниже, в разделе "Выделение позиции". Пока же мы про- 
сто отметим, что при нажатии клавиши со стрелкой вниз функции Моуе- 
Н15ВИ211() отправляется значение 1, а при нажатии клавиши со стрелкой 
вверх —'значение -1. 


Если "особые" клавиши не нажимались, мы проверяем, требуется ли для 
получения значений обращение к серверу, или мы можем взять их из спис- 
ка, полученного ранее ©. В этом месте мы снова используем реализован- 
ный в нашем сценарии механизм кэширования, ограничивая число обраще- 
ний к серверу (а также нагрузку на сервер). Итак, с помощью различных 
проверок нам нужно выяснить, требуются ли новые результаты. Вначале мы 
определяем находится ли в фокусе в текущий момент окно, активизирован- 
ное последним. Далее проверятся, что текст, в текущий момент набранный 
пользователем в текстовом окне, отличается от предыдущего только добав- 
лением новых символов в конце. Если результатов для вывода на экран не 
найдено или наше множество результатов насчитывает не больше пятнадца- 
ти элементов, необходимо получить данные с сервера. Последняя проверка 
позволяет убедиться, что длина текущего значения больше предыдущего. По- 
лучать данные с сервера требуется только тогда, когда это покажет любая 
из проверок. В таком случае мы устанавливаем статус обј[аѕіАсіуе для те- 
кущего текстового окна. Затем задается булево значение, показывающее, что 
был отправлен запрос (это нужно для того, чтобы мы не отправили несколько 
запросов), и вызывается функция ТуреАћһеаа(), отвечающая за захват значе- 
НИЙ. 


После этого мы устанавливаем текущую строку в текстовом окне равной 
доследней известной строке ®. Это значение будет использовано еще раз, 
когда при вводе следующего символа мы проверим, требуется ли запраши- 
вать с сервера новые данные. Таким образом, далее мы должны рассмотреть 
обращение к серверу для получения данных. 
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10.3.3. Обращение к серверу 


Объект хМЕНИрКедиез( позволяет передавать текст из текстового окна на 
сервер и получать результаты с сервера. В данном случае мы отправляем 
данные на сервер, поскольку серверная страница, созданная в листинге 10.1 
обращается к элементам, отправленным в форме. Как показано в листин- 
ге 10.11, в объекте Сомеп .оа4ег требуется задать положение страницы на 
сервере, функцию, вызываемую после завершения выполнения этого объекта 
а также параметры формы, которые будут отправлены форме. 


Листинг 10.11. Функция Ајах, используемая для отправки данных на сервер \ 
Ғопсііоп ТуреАһеаа(х$їгТехі){ 


уаг ѕїгРагатѕ • "а=" + хЅігТехі + 
"&уһеге=" + {һеТехёВох.оБј. таісҺАпумһеге; 
уаг Іоайегі = пе\м пеЕ. Соп{епЕГоааег( 


їћеТехВох.обј.ѕегуегСойе, Ви !аСво1!сез, пи! 1, "РОЅТ",ѕігРагатѕ); 
) Е 





При вызове функции ТуреАһеаа() из функции СіуеОрііопѕ () мы (для 
выполнения поиска) передаем ей текущее значение строки из текстового ок- 
на. Нам требуется создать строку параметров, ѕігРагатѕ, содержащую зна- 
чение строки в текстовом окне, а также булево значение таісҺАпууһеге. Оба 
названных элемента использовались в листинге 10.1 для получения резуль- 
татов поиска. Затем мы начинаем загружать документ, вызывая Сопќепі- 
Гоадег. Для этого в качестве двух первых параметров Сопѓепіоайег мы 
отправляем ОВГ серверной страницы и функцию ЈауаЅсгірі, которая будет 
вызвана при возврате результатов. Третий параметр равен пи, поскольку 
мы собираемся игнорировать все сообщения об ошибках. Благодаря этому 
поле с опережающим вводом будет выглядеть подобно обычному текстовому 
полю. Последние два параметра указывают Сопѓепії оайег поместить данные 
на сервер и отправить параметры формы, содержащиеся в строке ѕігРагатѕ. 

После возврата результатов с сервера вызывается функция Ва|а- 
Сһоісеѕї), позволяющая завершить обработку данных на стороне клиен- 
та. Разрабатывая код серверной части сценария, мы возвращали результаты 
в виде двухмерного массива ЈауаЅсгірі. Этот массив содержал пары "текст- 
значение" предлагаемых вариантов выбора. Тем не менее в отклике мы име- 
ем просто строку символов. Следовательно, нужно взять эту возвращенную 
строку и отформатировать ее как массив ЈауаЅсгірі. Соответствующая функ- 
ция, обрабатывающая информацию, полученную от Сощеп(Гоадег с помо- 
щью метода еуа|(), приводится в листинге 10.12. 


Листинг 10.12. Преобразование свойства гезропзеТех{В массив ЈауаЅсгірї 
Ғопсёіоп Виі1асһоісеѕ () { 

уар ѕігТехі = ёһіѕ.гед.геѕропѕетТехі; 

еуа1 (ѕігТехі) ; 

Воиі1аіізё (ѕёгіаѕіуа1пце); 

рмМадеКеаџеѕі = Еа1зе; 
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Свойство геѕропѕеТехі возвращенного объекта запроса позволяет полу- 
чать текст из запроса Ајах. Чтобы данную возвращенную строку можно было 
использовать в нашем коде ЈауаЅсгірі, необходим метод еуа!О, нужным об- 
разом обрабатывающий строку, переданную ему в качестве аргумента. В дан- 
ном случае этот метод распознает, что строка представляет собой объявление 
переменной для создания нового массива. Если бы мы просто записали строку 
на страницу, она не была бы доступна для выражения ЈауаЅсгірі. Как пра- 
вило, разработчики не приветствуют использование метода еуа|{) из-за его 
известной медлительности. Однако в данном случае он позволяет отказаться 
от циклического прохода ХМГ-документа на стороне клиента для получения 
значений. Теперь мы можем вызвать функцию Виі1411510, форматирую- 
щую и отображающую возвращенные результаты. Кроме того, мы устанав- 
ливаем значение булевой переменной БЬМайеКедиеѕі равным Ёа15е, сообщая 
оставшейся части сценария, что запрос к серверу завершен. 


Создание окна результатов 


Использование ЈауаЅсгірі для обработки текущего документа обычно счи- 
тается признаком ОНТМГ. В данном примере мы принимаем двухмерный 
массив и превращаем его в строки текста на экране. Вернувшись к рис. 10.4, 
мы увидим список слов с подчеркнутыми фрагментами — частями текста, 
совпадающими с тем, что ввел в окне пользователь. В нашем приложении 
данные слова будут отображаться как элемент ѕрап. 

Функция Виі1а1151(), созданная в листинге 10.13. использует три функ- 
ции: поиск слов по шаблону, установку положения окна и форматирование 
результатов с использованием подчеркивания. 


Листинг 10.13. Форматирование результатов в формат отображения 
Еорсе1оп Ви11911$6 (ЕһеТехё) { 
беЕЕ1епмепіРоѕіііоп (ЕћҺеТехіВох) ; 
// Установить положение элемента > 
уаг ЄһеМасһеѕ - МакеМаіёсһеѕ (ёһеТехі) ; 
// Отформатировать соответствия 
сҺеМаёсһеѕ = ЕһҺеМаёсһеѕ.јоіп () .гер1асе{/\,/91,""); 
// Показать результаты 
ТЕ (ЕҺеМаєсһеѕ.1епоёһ > 0) { 
аосотепі . деёЕ1етмепіВу1а (" ѕрапоиёриё") 
.іппеүнНтмі, = ёҺемаёсһеѕ; 
дӢосопепі .десЕТетептеВу1аЕ 
"Орііопѕііѕі 0") .с1аззМаше = 
"зрапніоћЕ1 етеп"; 
сиггепёУа1чџеѕе1Іесіеа = 0; 
ЪМоВези1Е5$ = Ға1ѕе; 




















//Не показывать варианты 
е1зе{ 
соггере\Уа1оебе1есееа = -1; 
рмМоКеѕиіѕ = ёгое; 
іЁ{СҺеТехіВох.орј . ѕћҺомМоМаёсҺМеѕѕаде) 
дӢосопепі .деёЕ1 етепёВу1а ( 
"ѕрапооџёриё") .іппегнНтмі, = 
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"<ѕрап сІаѕѕ= по МаїісћРаїа'>" з 
їћеТехВох.обј 
. поМа.ісһіпдРаїа Меѕѕа.ве + 
"< /зрап>"; 
е[бе Ніде ТлеВох(); 





Функция Виі1а11510, приведенная в листинге 10.13, принимает строку 
введенную пользователем, и форматирует результаты. Первое, что мы долж- 
ны сделать, — это динамически разместить элемент ѕрап непосредственно 
под текстовым окном, в котором реализован опережающий ввод. Для это- 
го мы вызываем функцию 5еЕ1етеп(РозИ1опО (подробнее об этом — ни- 
же, в разделе "Динамическая установка положения элемента"). Расположив 
элемент зрап в нужном месте страницы, мы можем манипулировать мас- 
сивом, отыскивая соответствия с использованием функций МакеМаісһеѕ() 
(речь о ней пойдет в разделе "Использование регулярных выражений"). Эта 
функция возвращает массив, содержащий только информацию, согласующу- 
юся с введенной пользователем. В отличие от большинства интерактивных 
приложений опережающего ввода мы не требуем обработки на сервере, а с по- 
мощью Јауа$Ѕсгірі ограничиваем результаты на стороне клиента. 


Функция МакеМаќсһеѕ () форматирует результаты и возвращает их в ви- 
де массива. Затем мы превращаем этот массив в строку, используя метод 
јоіп. Если длина строки больше 0, тогда мы можем отображать результа- 
ты в виде списка, задав его свойство шпегНТМГ. Затем мы выбираем первый 
элемент списка и устанавливаем его свойство сІаѕ$Ҹате, чтобы выделить 
этот элемент. 


Если возвращенный массив не содержит данных, мы отображаем сообще- 
ние "до таѓсһеѕ" ("нет соответствий"), если текстовое окно это позволяет. Мы 
знаем, что соответствий нет, поскольку проверяем, что значение сиггепіѕ- 
еес{еа\Уаше установлено равным -1. Если никаких сообщение отображать 
не требуется, мы скрываем окно. 

Итак, мы завершили выполнение функции Виі14115#0 и теперь можем 
создавать все функции, которая она вызывает. Первой из них рассмотрим 
Ѕе:ЕІетепіРоѕіііоп(). 


Динамическая установка положения элемента 


За расположение текстового окна ввода на странице отвечает процессор бра- 
узера. Создавая раскрывающийся список с предложениями ОНТМІ., мы же- 
лаем выровнять его точно по текстовому окну. Поскольку нам требуются 
координаты раскрывающегося списка, то приходится решать довольно слож- 
ную задачу нахождения положения элемента (в нашем случае — текстового 
окна), которое не задано жестко. Такие элементы размещаются на странице 
относительно — без указания абсолютных координат верхнего левого угла. 
Попытавшись сослаться на левую верхнюю точку текстового окна, мы по- 
лучим в ответ неопределенную строку. Следовательно, для определения по- 
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дожения элемента нужно использовать возможности ЈауаЅсгірі — тогда мы 
сможем выровнять окно с вариантами выбора непосредственно под тексто- 
вым окном. Динамическое размещение элемента списка с выравниванием его 
под текстовым окном представлено в листинге 10.14. 


Листинг 10.14. Динамическое нахождение положения элемента 
Ғопсёіоп бееЕ1етмейтеРо$1Е1оп (ЕҺеТехёВохІпі) { 

уаг ѕе1есіеароѕх - 0; 

уаг ѕе1ІесіеароѕуҮ = 0; 

уаг ёҺһеЕ1етепё « ёһҺеТехіВохІпі; 

1Е (!єһеЕ1етепё) геёигп; 

уаг ЕһеЕ1ешНеісһће = ЕһеЕ1 емепі .оҒғЁзѕеёНеідћіг 























уаг ёҺеЕ1епиіаєһ = ёһҺеЕ1етмепі .оЁЁѕеёиіаёһ; 
мһі1е (ёҺеЕ1емепі != пи11)І 
ѕе1есіеароѕхХ += ЕһеЕ1етепі .оЁЁѕеёеїЁі; 
ѕе1есёеароѕх += ёЕҺеЕ1епепі .о##ѕеЁТор; 
сҺеЕ1етмепіё = ёҺеЕ1етепё .оЁЁѕеіРагепі; 





} 
хРозЕ1етмепЕ • Яоситепі .деёЕ1епепіВутІа ( " ѕрапоцёриё"); 
хРозЕ1етепе .з6у1е.1еЕЕ = ѕе1есіеароѕх; 

1Е (ЕҺеТехіВохІпЕ .орј .тмаёсһТехіВохиіаёһ) 























хРозЕ1етепе .ѕіуІе.міаєһ • ёһеЕ1епиіаёһ; 
хРоѕЕ1етепі.ѕіу1е.ёсор = ѕе1есіёеароѕуү + ёһеЕ1емНеісһё 
хРроѕЕ1епепі.ѕіу1е.аіѕр1ау = "Боск"; 
1Е (ЕҺеТехеВохІпі .оЪ) .иоѕетітмеоиі) { 

хРозЕ1етепе .оптоизеоцЕ = біагЕТітпеоиё; 

хРозЕ1етепе .оппопзеоуехг = ЕгаѕеТітмеоиё; 
е1ѕе { 

хРозЕ1етепе . оппоцѕеоиі • по11; 











хРоѕЕ1Іепепі .опгооцѕеоуег *= пи11; 





В листинге 10.14 мы объявляем функцию ЅеёЕІетепіРоѕіїіоп(), прини- 
мающую один параметр: ссылку на объект текстового окна. Значения двух 
локальных переменных, ѕеіесіеірРоѕХ и зе|ес{еаРозУ, устанавливаются рав- 
ными 0. Эти две целочисленные переменные используются для расчета по- 
ложения элемента. Ссылка на текстовое окно задается в другой локальной 
переменной. Для получения ширины и высоты текстового окна применяются 
свойства ое Не? и о#еіМіаһ. 


Для последовательного прохода дерева документа используется цикл 
уППе. Дерево документа позволяет получить координаты Х и У положения 
элемента относительно его родителя. Последовательно проходя всех предков 
искомого элемента, мы можем найти его точное положение, прибавляя сме- 
щения к созданным выше двум локальным переменным. 

Получив положение текстового окна, мы можем извлекать объектную 
ссылку списка, использованную для задания верхней левой точки раскры- 
вающегося списка с предложениями. Затем мы изучаем объект обј тексто- 
вого окна, проверяя, должно ли его свойство \1А согласовываться с шири- 
ной текстового окна. Если соответствующее булево значение равно (гие, мы 
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устанавливаем ширину списка. Если значение равно #а15е, ширина задается 
равной значению, указанному в таблице стилей. Последнее, что от нас требу- 
ется, — изменить параметр видимости списка, чтобы он больше не скрывался 
от пользователя. Для этого свойство 415р1ау устанавливается равным ЫоскК. 

Подытожим: мы правильно разместили список и сделали его видимым 
пользователю. Теперь можно разрабатывать код, заполняющий список пред- 
положениями. 


Использование регулярных выражений 


Поскольку приложение предполагает поиск фрагментов строки, напомним, 
что одним из лучших инструментов поиска соответствий являются регуляр- 
ные выражения, обладающие к тому же хорошей гибкостью. Функция Маке- 
МаѓсһеѕО, которую мы создадим ниже, позволяет находить в списке вари- 
антов слова, согласующиеся с тем, что пользователь ввел в текстовом окне. 
Это означает, что мы можем обойтись без обращения к серверу после каж- 
дого нажатия клавиши, так как необходимый отбор вариантов производится 
функцией на стороне клиента. Код, приведенный в листинге 10.15, позво- 
ляет сэкономить полосу пропускания, ограничивая множество полученных 
результатов. 


3% Листинг 10.15. Ограничение результатов с помощью регулярных выражений 
уаг соџпіЕогіа = 0; 
Ғопсіоп МакеМаѓсһеѕ(хСотраге$їг)! 
соипіЕогіа = 0; 
уаг таісһАггау = пеу Аггау(); 
уаг гегЕхр = пем КеғЕхр(ћеТехіВох.оБј.гевЕхАпу + 


хСотраге$їг,ћеТехіВох.обј.гевЕхЕ1ағѕ); 
#о1(1=0;1<аггОрііопѕ.Іепеёһ;1++) { 
уаг ФеМасН = аггОріопѕ[1][0].тасһ(терЕхр); 
і {(һеМаѓсһ){ 
таѓсһАггау[таќсһАггау.Іепеіһ |= 
Стеаѓе Опаегііпе(аггОрііопѕ[1][0], хСотраге$іг,1); 





Мы создаем функцию МакеМаќсһеѕ (), которая принимает один параметр: 
строку, введенную пользователем. Затем мы присваиваем переменной соипі- 
Еог!4 значение 0 и создаем локальную переменную массива таісҺАггау. (Об- 
ратите внимание на то, что соип{ЕРог!4 — это глобальная переменная. Это 
позволяет немного упростить структуру примера. Позже мы избавимся от 
этой переменной.) Суть данной функции заключается в создании регуляр- 
ного выражения, находящего варианты, согласующиеся с тем, что вводит 
пользователь. Поскольку мы уже определили параметры для регулярного 
выражения, создавая код, приведенный в листинге 10.6, сейчас нам требуется 
сослаться на объект текстового окна. Далее мы добавим свойство гевЕхАпу, 
позволяющее согласовывать текст, начиная с начала или любого места стро- 
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$#. Свойство гегЕхЕ1аз5 позволяет определять, следует ли при поиске соот- 
ветствий игнорировать регистр. 

По завершении работы с регулярными выражениями мы последователь- 
но проходим массив аггОрііопѕ, проверяя, действительно ли находящиеся 
в нем варианты согласуются с нашим регулярным выражением. Если да, то 
МЫ добавляем текст в массив тасПАггау после вызова функции Сгеаѓе0п- 
аегіпе(), которая форматирует код, отображаемый на экране. 

Завершив проход по всем элементам массива, мы возвращаем найден- 
ные соответствия основной функции Виі141151{), после чего отобранные 
варианты отображаются на экране. Функция МакеМасВе$() предоставля- 
ет механизм кэширования, о котором мы уже говорили выше. Вместо по- 
вторного обращения к серверу за ограничением множества результатов после 
каждой набранной буквы мы используем регулярные выражения, сокращая 
уже имеющийся набор вариантов. Последним этапом обработки результа- 
тов является вызов функции Сгеаѓе Опаӣегііпе (), которая обеспечивает нуж- 
ное форматирование. 


Обработка строк 


Последний этап форматирования строк, позволяющий пользователю видеть 
их и взаимодействовать с ними, заключается в следующем: в строках, находя- 
щихся в списке, подчеркивается фрагмент текста, отображенный в текстовом 
окне, и с каждой позицией списка соотносится обработчик событий опсПскК, 
позволяющий пользователю выбирать позицию с помощью мыши. Создание 
строки, отформатированной нужным образом с помощью регулярных выра- 
жений, представлено в листинге 10.16. 


Листинг 10.16. Обработка строк средствами уамасир+ 
уаг опаебеахкЕ = "<ѕрап Сс1азз=' ѕрапмаёсһтТехё'>"; 
уаг цпаеЕпа = "</ѕрап>"; 
уаг ѕеІіесёЅрапбіагё = "<ѕрап ѕбу1е= міаёћ: 100%,-а1ѕр1ау:р1оск; 
с1аѕѕ= ' ѕрапМогта1Е1емепі' оптоцѕеоуег= • ЅеінідћСо1ог (Еёћіѕ)' "; 
уаг ѕе1есёЅрапЕпа ="</зрап>"; 
Ғопсііоп Сгеасеупдег1іпе (хЅіг,хТехёмаёсһ,хУа1) { 
ѕзе1есіѕрапміа = "опс1іск='ЅеітТехі (" + хУа1 +") ' "+ 
"іа= 'Орііопѕі1іѕё_"+соцпіРогІа+ " 'ЕҺеАкгаумитрегџ=' "+ хУ\Уа1 +'">" 
уаг гедЕхр = пет БедЕхр {ёһеТехёВох.орј .гедЕхАпу + 
хТтехЕмМаєсһ,ЕћеТехіВох.орј .гедЕхЕ1адѕ); 
уаг абёагі = хоіг.ѕеагсһ (гедЕхр) ; 
уаг паёсһеатТехё = хЅіг.ѕирѕёгіпо (аббат, 
абеагЕ + хТехЕМаісһ.1епдёһ) ; 


























соопіЕогІа++; 

геёигп ѕе1есібрапбіагі + ѕе1есідѕрапміа + 
хоіг.гер1Іасе (гедЕхр,опаебіёагі + 
паєсһеатТехі + џпаеЕпа) + ѕе1іесіѕрапЕпа; 
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В листинге 10.16 определяются две переменные, которые содержат стро- 
ки, используемые для привязки класса С55 к фрагменту текста, согласу- 
ющемуся с заданной строкой. Благодаря этому можно легко определить 
‘тиль нужного текста. Первая переменная, ип4ез{аг{, содержит открыва- 
ощий дескриптор ѕрап; вторая, ипаеЕпа, — соответствующий закрываю- 
ций дескриптор. 

Следующие две переменные формируют контейнер для всей строки. Этот 
сонтейнер позволяет манипулировать цветом фона и определять, щелкнул ли 
юльзователь на ячейке. Чтобы визуально выделить ячейку, на которую на- 
еден указатель мыши, мы добавили в переменную ѕеіесіЅрап$їагі событие 


Іоџѕеоуег. Переменная ѕеІесіЅрапЕпа представляет собой закрывающий де- 
криптор элемента ѕрап. 


Функция Сгеа{еОпаегИпе() вызывается функцией МакеМаїѓсһеѕ<), ко- 
юруго мы написали чуть выше. МакеМасПез () принимает три параметра: 
троку, введенную пользователем, текст предлагаемого варианта, а также 
начение данной опции. Используя переданные данные, можно создать об- 
• аботчик опсПсК и добавить к списку идентификатор. Обработчик событий 
псіск позволяет выбрать один из предложенных вариантов, а идентифи- 
атор — использовать РОМ для выбора варианта из списка. 


Для сопоставления текста, введенного пользователем, с фрагментами 
редлагаемых вариантов мы снова используем регулярные выражения. Та- 
им образом мы можем вставить в строку созданные блоки с подчеркиванием. 
[тобы определить, в каком месте строки находится соответствие, применяет- 
^ метод ѕеатсһ. Найдя положение искомой строки, мы можем получить под- 
гроку, в которой можно сохранить исходное форматирование. Далее значе- 
не счетчика соипіЕогІа увеличивается на 1, и мы возвращаем отформатиро- 
шную строку, объединяя все созданные элементы ѕрап. Теперь текст отфор- 
атирован, осталось дописать классы С$$, добавленные к элементам ѕрап. 


Элементам зрап были присвоены имена классов С$$, поэтому от нас 
3 требуется вручную редактировать код ЈауаЅсгірі, изменяя определенные 
юйства текста. Это позволяет подогнать текстовое окно с опережающим 
юдом под любую цветовую схему, изменив несколько правил С55. 


ѕрап.ѕрапМаѓсһТехії {ех{-4есогайоп: оипаегііпе; 
Ғопі-меіеһі: Боа; } 
ѕрап.ѕрапМогта!іЕІетепії Баскргоџпа: #000000; 
ѕрап.ѕрапНівћЕІетепі! Баскогоџпа: #000040; 
со[ог: мһіїе; сигѕог: ройщег; } 
ѕрап.поМаќсһ Оаќа{ Ёопі-меіеһі: Ьо14; со1ог: #0000ЕЕ; } 


Напомним (см. рис. 10.4), что текст списка, согласующийся с текстом 
на, подчеркнут и выделен полужирным. Оба этих свойства заданы в пра- 
ле С88 ѕрап.ѕрапМаїсһТехі. Стиль блока по умолчанию (серый цвет фо 
) представлен в правиле ѕрап. ѕрапМогтаіЕ1Іетепі. К выбранному элементу 
именяется правило С$5 ѕрап.ѕрапНівћЕетепі. На рисунке также видно, 
о фон имеет темно-серый цвет, а текст представлен белым. Кроме того, 
рсор был заменен указателем, поэтому пользователь знает, что вариант 
жно выбрать с помощью мыши. К любому из этих элементов можно доба- 
гь и другие свойства: шрифт, размер, границу и т.д. Итак, мы сформулиро- 
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вали правила таблицы стилей и закончили работу по выводу результатов на 
экран. Осталось только реализовать обработку клавиш со стрелками и кла- 
виши <Ещег> и создать таймер, который будет скрывать список вариантов 
в моменты бездействия. 


Выделение опций 


ранее в этой главе мы показали, как отслеживать нажатия клавиш со стрел- 
ками вверх и вниз, чтобы пользователь перемещал ѕеіесіейіпӣех вверх-вниз 
по списку, не прибегая к помощи мыши. При нажатии клавиш со стрелками 
мы получали 1 ("сместить выбор вниз") или -1 ("сместить выбор вверх"). 
При перемещении выбора мы применяем правила классов С$$ к элемен- 
там зрап. Кроме того, мы создали глобальную переменную сиггепУаше- 
Зеес{е4, в которую помещаем номер текущей позиции. Функция МоуеН!1- 
1і6һ(), приведенная в листинге 10.17, предлагает более богатый пользова- 
тельский интерфейс, поскольку взаимодействует и с мышью, и с клавиатурой. 


Листинг 10.17. Изменение имен классов С$5 с помощью ЈауаЅсгірі 
РАрсНоп МоуеНіеіеһ(хріг){ 
Е (сиггепіУаиоеЅе1есїеа ж 0){ 
пеиУа]ое = рагѕеіпї (соггепіуаіџпебе1есёеа) + ракѕеіпіё {хріг); 
1Е(пемуа1ае > -1 && пемУаТае < сооџпіРЕог1а) { 
Соггепіуа1џебе1есёеа = пем\Уа1ае; 
беёнідћСо1ог (пи11); 








І 


} 
Ғопсііоп ЅеёнідћСо1ог (Е БеТехеВох) { 
1Е (сБетехеВох) { 
сигхепе\Уа1аебе1есееа = 
сретехЕВох.1а.$11се ((ВеТтехЕВох.1а.1паехоЕ ("_") +1, 
сСретехЕВох.14а.1епаЕВ); 
} 
Ғог{і = 0; і < сооџпіЕог1а; 1і++) { 
досотепё .десЕ1емепЕВутІа ('Орііопѕііѕі ' + 1).с1аѕѕМаме = 
‘зрапМогма1Е1етере'; 











} 
аосомепе. чесЕ1етепеВУТА ( ' ОрЕ10оп$11$6__' + 


сикгепіуа1џебе1есёеа) .с1аѕѕМаме = 'ѕрапнідћЕ1емепіё'; 











Функция МоуеНівһііѕһї ї) позволяет пользователю использовать для вы- 
бора клавиши со стрелками вверх и вниз. Эта функция принимает один па- 
раметр, хрЮіг, обозначающий направление, в котором должно сместиться вы- 
деление. Прежде всего мы должны убедиться, что у нас есть варианты на 
выбор и можно получить новое значение. Далее мы проверяем, что это новое 
значение принадлежит разрешенному диапазону. При положительном ответе 
мы устанавливаем состояние сиггепіУаІиџеЅе1есіеа и переходим к следую- 
щей функции, ЅеіНіећСо!ог (), выделяя новую выбранную позицию. 
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Функция 5еН1епСо[ог() вызывается двумя различными событиями: на- 
жатием клавиш со стрелками и наведением указателя мыши на позицию (об- 
работчик событий опточзеоуег). Эта функция предназначена для удаления 
подсветки с последней выбранной опции и добавления ее к новой выбранной 
позиции. Событие опточзеоуег (см. листинг 10.16) принимает в качестве ар- 
гумента объект блока предложенных вариантов; следовательно, мы должны 
отсечь идентификатор и получить порядковый номер блока. Требуемое зна- 
чение передают клавиши со стрелками, поэтому нам не нужно ничего делать 
так как функция шоуеН1еВ эр () уже установила сиггеп(Уашезе]есеа. 


Далее мы последовательно проходим все дескрипторы зрап и устанав- 
ливаем их класс С55 равным ѕрапМогта!Еетепі. В результате их внешний 
вид соответствует невыбранной позиции. Завершив проход, мы добавляем 
класс С$85 к выбранной опции. Таким образом, две созданные выше функции 
позволяют пользователю выделять нужную позицию с помощью мыши или 
клавиатуры. Теперь нам осталось взять это выбранное значение и добавить 
его в текстовое окно. 


Установка выбранного значения 


Мы разрабатываем сценарий, который позволил бы пользователям, выбирая 
из предложенных вариантов, уменьшать объем работы, требуемой для запол- 
нения поля формы. Для этого нам нужно взять номер выбранного пользова- 
телем элемента и установить текст в текстовом окне и значение в скрытом 
текстовом поле. Чтобы поведение нашего списка вариантов было похоже на 
поведение элемента НТМЕ зе!ес{, мы разработали три функции, приведен- 
ные в листинге 10.18. 


Листинг 10.18. Обработка нажатия клавиш со стрелками и щелчков мышью 
Ғопсіёіоп ЅеёТехі (хУ\Уа1) { 
среТтехЕВох.уа1ае = аггорііопѕ [хУуа1] [0]; //ѕеі ёехё уа1ае 
сҺеТехЕВох.орј .Һіадеп, уа1ае +» аггорёіопз [х\Уа1] [1]; 
Чосциепе . чеесЕ1етепеВу1АЯЕ" зрапОце рае") .ѕіу1е.аіѕр1ау = "попе"; 
сигхгерпе\Уа1аебе1есееа = -1; //хетоуе ёһе ѕе1есёеа 1паех 














} 
Ғопсёіоп бгарнісћ1ісћһіёеа () { 
1Е (соггепіУаіпџебе1есіёеа >= 0) { 
хуа1 = даоситепі .дчееЕ1етепеВу1аЕ "Орёіопѕііѕё_" + 
соггепіуа1џебе1есёеа) .десАЕгірибе ("ЕҺеАггаумитрег") ; 
беёТехіёЁхУа1) ; 
Ніаетћевохо ; 
} 











} 


Ғопсёіоп Н1аетрЬеВохЕ) { 
аосоптепі . чесЕ1етереВу1АЕ" ѕзрапоціриё") .ѕёу1е.даіѕр1ау = "попе"; 
сиггепіуа1оебе1есіеа = -1; 

ЕгаѕеТітеоиё (); 


Ј = 
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Функция СгаБЬНіеһіеһіеа() позволяет получить текст и значение вы- 
бранной позиции. Итак, вначале нам нужно проверить, выбрал ли пользо- 
ватель значение. Если да, тогда мы получаем порядковый номер массива 
атгОрНоп$, в котором располагается текст. Для этого мы берем установ- 
ленное ранее значение атрибута ШеАггауМитбег, затем вызываем функцию 
ЅеїТехі (), устанавливающую текст значения выбранной опции в соответ- 
ствующие элементы формы. 

Функция ЗеТех{() использует порядковый номер, переданный ей как 
параметр для индексирования массива аггОрііопѕ. Видимый пользовате- 
лю текст устанавливается путем индексирования первого индекса массива. 
Скрытый элемент формы получает номер второго элемента, записанного 
в массиве. После того как мы извлечем значения, мы удалим список вариан- 
тов с экрана, вызвав функцию НійеТћеВох (). 

Функция НійеТһеВох () позволяет удалять блок зрапОириЕ из поля зре- 
ния. Для этого мы обращаемся к блоку и устанавливаем его свойство 
ѕіуІе .аіѕрІау равным попе. Для удаления выбранного индекса присваива- 
ем переменной сиггеп(Уашезеес{е4 значение - 1. Все запущенные таймеры 
удаляются посредством функции ЕгаѕеТітеооі(), разработкой которой мы 
займемся в следующем разделе. 


Использование таймеров Чауа$ сир: 


Этот раздел является последним, в которым фигурирует ЈауаЅсгірі. Написав 
его, мы завершим создание приложения опережающего ввода, и вы сможете 
немного отдохнуть от всего этого кода. Итак, таймер, приведенный в листин- 
ге 10.19, является еше одним элементом, делающим интерфейс пользователя 
немного богаче. Он используется для того, чтобы укрыть блок выбора по- 
сле определенного периода бездействия. В данном случае мы используем ме- 
тод ЈауаЅсгірі ѕеТітеоиї(), выполняющий выражение по прошествии опре- 
деленного времени. Это время задается в миллисекундах и привязывается 
к объекту, созданному в листинге 10.6. Отметим, что функция зе Титеоц( () 
будет вызвана только в том случае, если присвоить параметру объекта иѕе- 
Тітеоиё значение ігие. 


Листинг 10.19. Присоединение и удаление запланированных событий. 


Ғопсёіоп ЕгазеТ1шеоме () { 
с1еагтітмеоиё (1$Т1т1па); 1$Туилиа • Еа15е; 





} 

Ғопсёіоп ЅбагёЕТітеоиіё {) { 
іѕТітміпо = зесТ1меочце ("НіаетһеВох () ", 
СсҺеТехЕВох.орј .Еһћеуіѕір1етТітме) ; 








Функция ЅїагіТітеоиші () устанавливает таймер при выполнении функ- 
ции. Для инициализации таймера мы присваиваем переменной іѕТітіпе зна- 
чение ѕеТітеооё. Метод ѕеіТітеоџі должен вызвать функцию НійеТће- 
Вох () по прошествии установленного времени, которое задается с помощью 
еҺеуіѕір1ІетТіте. 
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Рис. 10.5. Ход проекта опережающего ввода 


Единственное, что мы еще должны сделать, — это удалить блокировку 
по времени. Для этого мы создаем функцию ЕгаѕеТітеош (), использующую 
встроенную функцию ЈауаЅсгірі сІеагТітеои () и предотвращающую сраба- 
тывание НійеТһеВох(). Значение булевой переменной іѕТітіпе устанавлива- 
ется равным Ёа1ѕе. 

Написав последнюю строку кода, мы можем запускать проект опережа- 
ющего ввода! Запишите проект, откройте его и начинайте набирать слово. 
В действии процесс выбора из предлагаемых вариантов выглядит так, как 
показано на рис. 10.5. При наборе первой буквы (5) число вариантов превы- 
шает 15. Вторая буква (л) уменьшает их число до пяти. Третья (о) сокращает 
список до одной позиции, которую мы выбираем, нажимая клавишу <Ещег>- 
Добавив этот проект к любой форме, вы можете повысить эффективность ра- 
боты пользователей, позволив им не набирать слова целиком. 


10.4. Дополнительные возможности $ 


Мы разрабатывали сценарий так, чтобы на странице можно было реализо- 
вать несколько элементов с опережающим вводом. Все, что нам для этого 
требуется, — добавить для каждого элемента объявления с новыми вызо- 
вами функции Зе Ргорегез (). Минусом данного метода является то, что 
для заполнения раскрывающихся списков различными значениями мы долЖ- 
ны обращаться к нескольким страницам сервера. В большинстве случаев это 
не проблема, единственным отличием данных методов, скорее всего, буде” 
выражение 801. 
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Мы можем предложить более продуманное решение этой проблемы, вве- 
дя в специальный объект дополнительный параметр и отправив его на сер- 
вер. Есть и другая возможность — работать с тем, что мы имеем, и внести 
в код минимальные изменения. В таком случае простое решение включает 
изменение одной строки кода и добавление оператора Ш в код серверной ча- 
сти сценария. 

Итак, нам требуется каким-то образом научиться различать элементы на 
сервере, определяя, какой элемент потребовал дообработки. Сообщить о раз- 
личии проще всего с помощью имени, содержащегося в элементе. В дан- 
ном случае мы ссылаемся на имя текстового окна. Для внедрения опи- 
санной возможности мы изменили строку параметров так, как показано 
в листинге 10.20. 


Листинг 10.20. Измененная функция ТуреАћһеаа() 


РапсНоп ТуреАһеаа(хЅїгТехі){ 
уаг ѕігРагатѕ = "а=" + хЅігТехі + "&ммБеге=" + 
{ћеТехіВох.обј.таісҺАпумһеге + "&пате=" + ШфеТехжВох.пате; 
уаг Іоайегі = пеу пе. Сожщеп Гоадег(1ВеТежВох.о6].зегуегСоде, 
ВиПаСво1сез, поП,"РОЗТ" ‚1гРагапа$); 





Немного изменив переменную ѕігРагатѕ в функции ТуреАћһеаа(), в пара- 
метрах формы, отправляемых на сервер, мы теперь передаем имя текстового 
окна. Это означает, что мы можем обращаться к этому значению на серве- 
ре и использовать оператор іЇ-е1ѕе либо саѕе для запуска другого запроса. 
В таком случае нам не требуется реализовывать несколько страниц, соответ- 
ствующих различным элементам. 


10.5. Реструктуризация 


Разработав достаточно сильный набор функций, обеспечивающих возможно- 
сти опережающего ввода, мы можем подумать, как реструктуризировать все 
эти возможности в более удобном для использования виде. То, что мы создали 
на текущий момент, обеспечивает функциональные возможности, необходи- 
мые для предоставления на выбор ряда вариантов. Однако данная структура 
имеет свои недостатки с точки зрения работы, требуемой от разработчика при 
внедрении ее на У\еБ-страницу (или на 20-30 Меб-страниц). 

Давайте на минуту представим, что перед нами, как перед главным ар- 
хитектором использующей Ајах №еЫ-структуры, поставлена задача написать 
компонент опережающего ввода, который будет использовать вся компания. 
После завершения вводного собрания мы получаем краткий перечень функ- 
циональных требований. Не совсем еще понимая суть дела, мы просматрива- 
ем этот документ (табл. 10.2). 

По мере изучения списка нам в голову начинают приходить различные 
‘ысли. Прежде всего, руководство, похоже, не понимает концепцию приори- 
тета. Но поскольку этого стоило ожидать, давайте рассмотрим суть — требо- 
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Таблица 10.2. Наши функциональные требования 
Номер Описание требования Приоритет 


1 Компонент должен работать с существующей разметкой НТМЕ, не 1 
требуя никакого ее изменения. Допускается лишь простая модификация 
заголовка с целью внедрения линии поведения компонента 


2 Компонент должен без дополнительных усилий поддерживать 1 
многократное использование на одной странице 


З Должна существовать возможность индивидуальной настройки каждого 1 
экземпляра компонента Под этим имеются в виду как аспекты 
поведения (например, учет регистра, поиск с любого места), так и 
стилевое оформление С55 


4 Компонент не должен вводить глобальные переменные. Компания 1 
пользуется сторонними библиотеками Јаха$сгірї, и глобальное 
пространство имен уже достаточно засорено. Использование любых 
глобальных имен (кроме названия самого компонента) строго 


запрещено 
5 Компонент должен предоставлять разумные значения по умолчанию 1 
для всех конфигурационных опций 
6 Компонент должен работать в Іпїегпеї Ехр!огег и Еігеѓох 1 
7 Для уменьшения работ по кодированию, требуемых для улучшения 1 


качества и надежности решения, компонент должен быть создан на 
основе структуры с открытым исходным кодом 


8 Кстати, если получится, сделайте это до конца недели 1 


вания. Несмотря на то что мы проделали немалую работу, имеющийся сце- 
нарий не удовлетворяет даже половине из них. Сценарий уже готов, поэтому 
о требовании 7 можно забыть: нам не нужно уменьшать объем работ. Очевид- 
но, что требованию 8 сценарий также удовлетворяет (по той же причине). Он 
поддерживает различные браузеры, поэтому снимаем и требование 6. А вот 
что касается остального, то определенную работу проделать все же придется. 
У нас есть всего неделя, поэтому начнем. 


10.5.1. День 1: план разработки компонента ТехиддезЕ 


Прежде всего нам нужно определиться с тем, как поднять производитель- 
ность и уложиться в отведенное время. Один из лучших способов — перело- 
жить работу на других- Если кто-то может сделать часть работы, пусть он ее 
для нас сделает. В данном случае мы собираемся воспользоваться библиоте- 
кой с открытым исходным кодом Е1со (Вр: //орепгісо. оге) и расширением 
Ргоѓоѓуре.јѕ (һр: //ргоѓоѓуре.сопіо.пеї/). Библиотека Вісо предлагает 
некоторую инфраструктуру Ајах, эффекты и вспомогательные методы, кото- 
рые повысят скорость нашей разработки. Ргоѓоїуре предлагает инфраструк- 
туру Для прекрасных синтаксических идиом, благодаря которым наш код бу- 
дет выглядеть понятнее и потребует меньше времени на разработку. Поэтому 
давайте внимательно изучим последствия использования Ргоѓоїуре и Кісо. 
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ргоїоїуре 


ргоїоїуре предлагает разработчикам несколько расширений основного объ- 
екта ЈауаЅсгірі, а также несколько функций, способствующих поддержанию 
хорошего стиля кодирования. Ряд из них мы используем в нашем примере. 

Объект С]а$$ 

Объект С1аѕѕ, представленный в библиотеке Ргоїоїуре, имеет единствен- 
ный метод сгеаїе (), отвечающий за создание экземпляров, которые могут 
иметь любое число методов. Метод сгеа(е {) возвращает функцию, вызываю- 
щую другой метод того же объекта — іпіїіа1іле (). Звучит немного сложно, 
но на практике все просто По сути, таким образом формируется синтакси- 
ческая основа для задания типов в ЈауаЅсгірі. Идиома выглядит следую- 
щим образом: 

уаг Техеѕиддеѕі = С1аѕѕ.сгеаёѓе (); 

Техібидсдеѕё .ргоіоёуре = { 

// Вызывается в процессе создания 

10161а117е: Ёопсіёіоп( рі, р2, р3 ) { 


ћ 


}; 

В данном фрагменте кода создается то, что можно считать "классом" 
(хотя сам язык не поддерживает такой концепции), и определяется функция- 
конструктор іпіїіа1іхе (). Клиент компонента может создавать экземпляры 
класса с помощью приведенной ниже строки кода. 





уар сехЕбоааезЕ = пем Техе5Ѕисддеѕі (рі, р2, р3); 


Метод ежщепа О 

Библиотека Ргоїоїуре расширяет базовый объект ЈауаЅсгірі и добавляет 
метод, именуемый ехж{епа(), открывая этот метод для всех объектов. Ме- 
тод ежепа () принимает в качестве параметров два объекта: базовый объект 
и объект, который будет его расширять. Свойства расширяющего объекта 
переносятся на базовый объект. Это позволяет использовать механизм рас- 
ширения объектов на уровне экземпляров. Этой возможностью мы восполь- 
зуемся позже, когда будем реализовывать для настраиваемых параметров 
компонента Тех{$и55е5{ значения по умолчанию. 

Метод Віпа/ріпаАѕ Еуепё іѕќепег() 

Библиотека Ртгоїоїуре также добавляет два метода к объекту Еипсііоп: 
Ь1па() и ЪіпадѕЕуепі іѕїепег(). Эти методы предлагают синтаксически 
элегантный способ создания замыкания функций. Напомним, как мы созда- 
вали замыкания в других примерах: 

оТтһіѕ • 661$; 

Еһ1ѕ.опс1іск = Ёопсііоп() { оТтһіѕ.са115отеМеёһоа() }; 

С помощью метода Біпа() библиотеки Ргоѓоѓуре того же результата мож- 
но добиться гораздо проще. 

11ѕ.опсііск = 161$. саПЅотеМеоа.Ыпсі(їһіѕ); 

АРІ ЫпадАѕЕуепёНапаіег() передает методу объект Еуепі и сглажи- 
вает различия между Іһќегпеї Ехр]огег и стандартизованной МЗС моде- 
лью событий! 
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Метод $ — синтаксическая "конфетка" 


В ЈауаЅсгірїі в названиях методов можно использовать определенные специ- 
альные символы, например знак доллара ($). В библиотеке Рго{офуре этот ма- 
лоизвестный факт используется для инкапсуляции в метод одной из наиболее 
распространенных задач в ОНТМІ-программировании: извлечения элемента 
из документа на основе его идентификатора. Таким образом, в нашем коде 
мы сможем писать конструкции следующего типа: 


$ (Чех Е1е1а').уаше = аМемУаше; 
При этом мы обходимся без указанных ниже громоздких структур. 


уаг {ех{Е1е!4 = доситеп.еЕ!етер(Ву1а (ехЕеа' ) 
{ех(Е1е!4.уаше = аМе\мУаше; 


Кісо 
Используя Кісо, мы получаем Ргоѓоѓуре бесплатно. Посмотрим, что нам тре- 
буется от Е1со. Кісо предлагает богатый набор линий поведения, возмож- 
ностей перетаскивания и кинематических эффектов, но поскольку мы пи- 
шем компонент, использующий единственное текстовое поле, то большинство 
из доступных возможностей нам не понадобится. Однако еще есть прекрас- 
ный обработчик Ајах и некоторые вспомогательные методы, предлагаемые 
Кісо. Вспомогательные методы Кісо мы рассмотрим по ходу разбора примера, 
а сейчас остановимся на предлагаемой Кісо инфраструктуре Ајах. Возможно- 
сти Ајах Кісо публикуются посредством единственного объекта, доступного 
для документа адлахЕпеше. АРІ а]ахЕпеше предоставляет поддержку для 
регистрации логических имен для запросов и регистрации объектов, знаю- 
щих, как обрабатывать ответы Ајах. Рассмотрим, например, следующий код: 
ајахЕпеіпе.геріѕќегКедиеѕ0(  'сеИпуо1серака', 
'зотеГопСпайу 1.40" ); 
ајахЕпоіпе.геѕіѕќегАјахОЫјесі( 'хух', ѕотеОЫјесі ); 

В первой строке кода регистрируется логическое имя потенциально гро- 
моздкого ОВГ Ајах. Далее при отправке запросов можно использовать это 
логическое имя, не отслеживая упомянутый громоздкий ОКІ. Пример такого 
использования приведен ниже. 


ајахЕпвіпе.ѕепаКедиеѕі('вепуоісеРаќа', гедиеѕі рагатеѓегѕ ... ); 


Метод гевіѕіегКедиеѕї () локализует использование указателей ОВГ — 
теперь они встречаются только в одном месте, обычно это обработчик собы- 
тий опіоаа в разделе тела. Если ОКІ требуется изменить, это можно сделать 
в месте регистрации, не затрагивая остальную часть кода- 

Метод гевіѕіегАјахОбјесі() иллюстрирует регистрацию объекта обра- 
ботки Ајах. В предыдущем примере подразумевалось, что в ответах необходи- 
мо обращаться к объектной ссылке ѕотеОбЫјесі с помощью логического имени 
ху7, причем эта ссылка необходима для обработки ответов Ајах посредством 
метода ајахОрааїѓе (). 

Исходя из того, что мы используем описанные функциональные возмож- 
ности объекта ајахЕпеіпе, нам осталось только рассмотреть ответный ХМГ- 
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документ, ожидаемый процессором Ајах. Этот документ немного отличает- 
ся от динамически генерируемого сценария ЈауаЅсгірі, который возвращался 
в предыдущей версии данного примера, но Кісо ожидает получить ХМГ. Все 
элементы <геѕропѕе> документа должны находиться внутри элемента верх- 
него уровня <ајах-геѕропѕе>. Внутри указанного элемента сервер может воз- 
вращать столько элементов <геѕропѕе>, сколько требует приложение. Такая 
возможность очень удобна, поскольку позволяет серверу возвращать отве- 
ты, обрабатываемые различными объектами, обновляющими потенциально 
несвязанные области УеБ-страницы, — например, для обновления области 
состояния, области данных и конечной области вывода. ХМГ-документ для 
предыдущего примера приведен ниже. 
<ај ах-геѕропѕе»> 
<геѕропѕе буре= "орјесі" 14="хух"> 
{Бе геѕі оЁ {Ве ХМ. гезропзе аз погта! 
</теѕропѕе> 
<теѕропѕе... > 
тоге геѕропѕе еіетепіѕ Ш пеейеа.. 


</теѕропѕе> 
</ајах-геѕропѕе> 





Данный ХМГ-документ указывает ајахЕпеіпе, что данный запрос дол- 
жен обработать объект, зарегистрированный с идентификатором хух. Про- 
цессор Ајах находит объект, зарегистрированный с именем хух, и передает 
содержимое соответствующего элемента <геѕропѕе> методу а]ахИр4а*е(). 

Вот и все. День получился довольно коротким. Некоторое время мы по- 
тратили на изучение структур с открытым исходным кодом, на которые мы 
можем опираться, и разработали план внедрения их в требуемый компонент. 
Мы еще не написали ни строчки кода, но решили, как ускорить дальней- 
шую работу над проектом. Кроме того, мы подобрали платформу, которая 
поможет повысить производительность работы (удовлетворив при этом тре- 
бованию 7 технического задания). Кодирование начнется завтра. 


10.5.2. День 2: создание Техидде${— понятного 
и настраиваемого компонента 


Теперь, когда у нас есть хорошая технологическая платформа, мы можем 
создавать на ней свой компонент. При работе над проектами часто удобно 
идти от желаемого результата, заранее думая о контракте нашего компонен- 
та. Напомним наше первое требование. 


Требование 1. Компонент должен работать с существующей разметкой 
НТМІ, не требуя никакого ее изменения. Допускается лишь простая мо- 
дификация заголовка для внедрения линии поведения компонента. 


Из-за этого требования мы оставляем нетронутым практически все, что 
находится внутри элемента <Боду>. Поэтому предположим, что нам требуется 
ввести сценарий в НТМІ. посредством НТМГ-кода, подобного приведенному 
в листинге 10.21. 
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Листинг 10.21. НТМЕ-разметка компонента Техібиддеѕї 
<ћім1> 
<Һеаа> 
<ѕсгірі> 
уаг ѕивреѕіОрііопѕ = { /*ӣеїаі15 їо соте*/ }; 


Ғипсііоп іпјесіЅирвеѕі Веһауіог() { // Создать компонент в <һеай> 
ѕиввреѕї = пеу ТехіЅиввеѕі( 


'Не1а!', 'уреАћЋһеаараѓа.аѕрх', ѕиввеѕіОрііопѕ ); 
} >; 
< /ѕсгірі> 
</Һћеаа> 
<Боду опІоаа = "іпјесіЅ$ ивреѕі Веһауіог() "> 
<Ғогт пате="Богті"> 
Аш{оСошр[!е{е Техі Вох: 
<іприї ќуре="(ехі" 1ій— "еді" пате = "1х Оѕегіприё" > _- 
</огт> 
</Боду> 
< /в1т1> 


Смысл приведенного НТМІ-кода заключается в том, что нам требуется 
создать объект с идентификатором текстового поля, к которому мы будем 
привязаны, указателем ОВ. источника данных Адах и набором конфигураци- 
онных объектов, которые еще будут заданы. (Чтобы это сработало, тексто- 
вое поле должно иметь идентификатор.) Все, что находится внутри элемента 
<Боду>, остается без изменений. Разобравшись с этим, займемся конструкто- 
ром. Имя создаваемого компонента ТехіЅирреѕі помещается в глобальное про- 
странство имен с помощью функции-конструктора, которая (как вы помните) 


генерируется методом С]Іаѕ $. сгеаїѓе {) библиотеки Рготобуре, как показано 
в листинге 10.22. 


Листинг 10.22. Конструктор Техиадез 

Техёѕоддеѕі = С1аз$.сгеаее(); 

Техіѕоддеѕіё.ргоёоёуре = { 10161а112е: 
Ғопсёіоп{ап1а, иог1, 


орЕіопѕ) {//0 Ссылка на входной элемент 
сһіѕ.іа = апа; 








ЕҺіѕ.бехі1приё = $ (Еһіѕ.іЯ); 
уар ргомзег = пауісдаёог.оѕегАдепіё .соІоиегСаѕе (); 
// © Детектировать тип браузера 
Е615$.1$5тЕ = 
ргоиѕег.іпдӢехоОЁ Ё "тѕіе") != -1; 
Ссһіѕ-іѕОрега = 
ргоиѕег .іпдӢехОоЁ{ "орега")!= -1; 


// © Установить значения по умолчанию 
С615$.зоддезЕ1от$ = []; 
Ећіѕ.ѕзеіОрііопѕ (орііопѕ); 
ЕҺіѕ.іпіёАјах (игі); 

Еһіѕ.іпј есёѕоддеѕЕВеһауіог (); 





Ь 


СЕЛІ ь 
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Разберем этот конструктор. Как упоминалось ранее, конструктору пере- 
дается идентификатор текстового ввода, с которым нужно связать предложе- 
ние вариантов. Для поля ввода хранится ссылка как на идентификатор, так 
л на элемент РОМ О. Далее определяется браузер пользователя и записы- 
вается состояние, которое понадобится компоненту позже, когда потребуется 
информация о среде времени выполнения этого браузера ©. В данном случае 
специальный код требуется только для Пиегпе Ехріогег и Орега, поэтому 
проверяется использование только этих браузеров. 

Настройка Ајах и введение в код нужной линии поведения будет рас- 
смотрен позже ©. Пока же (до конца дня) сосредоточимся на возможности 
настройки компонентов. Как вы помните, ранее была создана функция Ѕеї- 
ргорегїіеѕ (), содержащая все настраиваемые аспекты нашего сценария. 

Ғопсііоп ЅеїРгорегііеѕ 

(хЕЈет, хНіааеп, хзегуегСоае, 
хівпогеСаѕе, хтаісҺАпууһеге, 
хтаісһтТехіВох\лағһ, хѕһом\ҸоМаёсһ Меѕѕаре, 


хпоМаѓсһіпе ЮаѓаМеѕѕарве, хиѕеТітеоиї, 
хһеУіѕіЫеТіте){ 


} 


Написанный код удовлетворяет требованию, которое касается возможно- 
сти настройки, но не обеспечивает удобный АРІ или подходящие значения 
по умолчанию. Для решения этих проблем вводится объект опций, который 
передается конструктору. Объект опций содержит свойство для каждого кон- 
фигурационного параметра компонента опережающего ввода. Теперь нужно 
заполнить опции конфигурационными параметрами. 

уаг ѕиссеѕ{Оріопа - { таќсһАпууһеге : гие, 12погеСазе : (гие }; 

Ғопсіоп іпјесіЅиввеѕіВеһауіог() 

$122е5{ = пем ТехіЅивреѕі('іеІаї', 'уреАһеаахмі.аѕрх', 

5и22е5{ОрНоп$ ); } ); 

Данная простая идиома предлагается следующие дополнительные пре- 
имущества. 


• Благодаря ей сигнатура конструктора выглядит понятнее. Сигнатура 
клиентских страниц, на которых используется наш компонент, может со- 
здаваться всего с тремя параметрами. 

• Можно вводить дополнительные конфигурационные параметры, не меняя 
контракт конструктора. 

. Можно написать изящную функцию ѕеїорііопѕ(), предоставляющую 
значения по умолчанию для всех незаданных свойств, и позволить поль- 
зователю задавать только те свойства, которые он желает изменить. 


В последнем пункте описано именно то, что делает метод зе ОрНоп$ (), 
включенный в конструктор ранее ©. Разберем его. 
зе ОрНопз: Ёипсіоп(орііопѕ) { 
һіѕ,орііопѕ * { 
ѕивбеѕїіріуС1Іаѕѕ Мате: '‘ѕиввеѕї Юіу', 
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ѕзидсдеѕііопс1аѕѕћате: '"ѕосдсдеѕёіоп', 
паєсһс1аѕѕМапе : 'таєсһ', 
таёсһТехііаєһ : гое, 
ѕе1есііопСо1орг : '#Ыс09С, 
паєсҺһАпукһеге : Ға1ѕе, 

ісдпогеСаѕе : Ға1ѕе, 


сооп : 10 
}.ехіепа(орііопѕ |І (}); 

Ь 

В данном коде задаются все свойства объекта опций, имеющие подходя- 
щие значения по умолчанию. Затем вызывается метод ехѓепа () библиотека 
Ртоѓоїуре, который переопределяет свойства, переданные во время создания. 
В результате получается смешанный объект опций, содержащий и значения 
по умолчанию, и переопределенные значения, заданные в одном-объекте! 
В использованном примере были переопределены булевы свойства таѓсһАпу- 
упһеге и ізпогеСаѕе (новые значения — (гие). Значения конфигурационных 
свойств объясняются в табл. 10.3. 

Обратите внимание на наличие нескольких опций, задающих, какие име- 
на классов С$$ должны генерироваться внутренне при создании структу- 
ры НТМЕ для всплывающего списка предположений. Напомним технические 
требования, которые приводились в табл. 10.2. 


Требование 3. Должна существовать возможность индивидуальной на- 
стройки каждого экземпляра компонента. Под этим имеются в виду как 
аспекты поведения (например, учет регистра, поиск с любого места), так 
и стилевое оформление С5$$. 


Требование 5. Компонент должен предоставлять разумные значения по 
умолчанию для всех конфигурационных опций. 


В готовом компоненте описанный механизм конфигураций будет исполь- 
зоваться для настройки на уровне экземпляров поведения (например, чув-] 
ствительности к регистру) и стилевого оформления (например, имен клас-! 
сов С55). 

Таким образом, к концу второго дня работы над компонентом мы взяли 
хороший старт. Был получен нормальный конструктор, создана основа для 
настройки компонента, а теперь пора включить в наш проект принципы Ајах. 


10.5.3. День 3: включаем Ајах 


Ну что, подключим к работе Ајах? Без Ајах компонент ТехіЅироеѕї подобен 

гамбургеру без говядины. Мы не относимся неуважительно к вегетарианцам, 

но сейчас пришло время говядины. Вы уже видели подготовку к включению 

Ајах при разборе конструктора. Как вы помните, в конструктор был включен 

метод шИА]ахЁ), который выполняет настройку, требуемую для обсуждав- 

шейся выше поддержки Ајах. Реализация данного метода приведена ниже. 
іпісАјах: Ёџпсёіоп(иг1і) { 


ајахЕпадіпе.гесдіѕзіегћеаџцеѕі ( Еһіѕ.іа + '_геаџеѕі', пу ); 
ајахЕпсдіпе.гесдіѕёегАјахОрјесі{ Еһіѕ.іа + '_ирӣӢаёерк', 661$ );} 
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Таблица 10.3. Значения конфигурационных свойств 


Значение Объяснение 


.09е5їріуСІаѕѕМате Задает имя класса С$$ для элемента іу, в котором будут 
содержаться предлагаемые варианты 


„ОоеѕіопСіаѕѕМате Задает имя класса С55 для элемента ѕрап, генерируемого 
для каждого предлагаемого варианта 


таїсһСіІаѕѕМате Задает имя класса С$$ элемента ѕрап, содержащего 
фрагмент предлагаемого варианта, согласующийся с вводом 
пользователя 

іпаїсћТехїміаіћһ Булево значение, указывающее, должен ли размер элемента 


аіу, генерируемого для списка предположений, 
согласовываться с шириной текстового поля, с которым он 
соотнесен 


ѕеіесіїіопСо1ог Задает шестнадцатеричное значение (или любое другое 
приемлемое значение, используемое С$$ для задания цвета), 
определяющее цвет фона списка предлагаемых вариантов 


таїсһАпумһеге Булево значение, которое задает, с какого места строки должно 
выполняться сопоставление, — с начала или с любой позиции 


іопогеСаѕе Булево значение, указывающее, должен ли учитываться 
регистр при поиске соответствий 


соипї Максимальное число показываемых предположений 


Напомним, что метод гевіѕіегКедиеѕї () предоставляет аппарату Ајах 
логическое имя указателей ОВГ, которые будут вызываться для данного за- 
проса посредством метода ѕепаКедиеѕі{). При условии, что нам требуется 
поддержка нескольких компонентов опережающего ввода на странице, име- 
ющих различные указатели КІ, (но использующие единственный элемент 
ајахЕпвіпе), необходимо сгенерировать для каждого из них уникальное ло- 
гическое имя. Таким образом, имя для запроса мы генерируем, основыва- 
ясь на идентификаторе компонента, который считается уникальным. Тот же 
принцип применяется при обработке регистрации. Мы регистрируем 1181$ как 
объект, обрабатывающий ответные сообщения, направленные к сгенерирован- 
ному нами идентификатору. 

Пожалуй, стоит проиллюстрировать сказанное на примере. Предпо- 
ложим, что мы привязали предложение вариантов к полю с иденти- 
фикатором ій='Ғіе141', а затем эффективно зарегистрировали себя как 
'"Ғіе1а1 ирЯӣаїег'. ХМГ-документ, возвращаемый этому компоненту, должен 
содержать элемент, выглядящий примерно так, как показано ниже. 


<ајах-геѕропѕе> 


<геѕропѕе їуре='објесі! 14= "'е1а1^ираӣаѓег >. 
тот же хті-текст, что и ранее. 
< /гезропзе> 


< /ајах-геѕропѕе> 
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Во внутреннем представлении запросы отправляются следующим образом; Щ 
ај ахЕпа1те. зепЯВесаезе { 
'Е1е1а1^геааезе ' /рагат1=уа11` ‚ "рагат2=уа12', 
у 
Учитывая вышесказанное, для получения Ајах-модификации нашего ком- 
понента необходимо отправить запрос и обработать ответный документ. По- 
смотрим, как это можно сделать. 





Предлагаемый текст — отправка запроса Ајах 


Разумеется, до отправки запроса придется сделать кое-что еще. Текстовый 
ввод должен сгенерировать событие опспапзе, которое мы будем ждать, и при 
выполнении определенных условий отправлять запрос о предполагаемых ва- 
риантах. Пока что написанные нами фрагменты кода находятся не на своих 
местах, но мы это поправим. Мы по-прежнему можем оперировать терминами 
контрактов и ответственности метода, которые желательно независимо реа- 
лизовать в конечном продукте. Поэтому предположим, что некоторый фраг- 
мент кода (который мы еще напишем) решает, что необходимо отправить 
запрос и получить ряд предполагаемых вариантов. Назовем эту функцию 
ѕепаКеаиоеѕіЕогЅ5ирреѕііопѕ () и реализуем ее следующим образом: 


зепаКеаче{ЕРогЗияе$ 01$; Рапс@оп() { 
Ш ( 101$. ВапапЦоВеаче$ ) { 
115.репаіпеКедиеѕі = 1гие; геёигп; 


} 
15.ҺапаіпеКедиеѕїі = їгие; 
1һіѕ.саПКісоАјахЕпріпе(); 

Ь 


Единственное, что делает приведенный код, — это вызывает {1.1$.са|- 
КісоАј ахЕпэше () при условии, что запрос не обработан. Этот простой меха- 
низм присваивает внутреннему булеву свойству 1115.НапаИп=Веацез{ зна- 
чение {гие после создания запроса Адах и Ға1ѕе (рассмотрено ниже) — по- 
сле обработки запроса. Если метод вызывается в момент обработки запроса, 
булеву свойству 1115.репа1Кеадие$Е присваивается значение їгие. Это со- 
стояние сообщает обработчику, что, возможно, ему придется отправить еще 
один запрос после обработки текущего. Далее мы рассмотрим метод са!В1- 
соАј ахЕпеше {), приведенный в листинге 10.23. 


Листинг 10.23. Использование а ј ахЕпеше (Кісо) 
са11кісоАјахЕпдіпе: ЕапсЕ1оп() { 
// Построить массив параметров 
уаг са11Рагмз = []; 
са11Рагтз.риѕћ ( 515.19 + '^геаиезі`); 
са11Рагтз.роиѕЬ{ ‘іа + 661$.19а); 
са11Рагтѕ.риѕһ ( 'соцпЕ=' + Еһіѕ.орііопѕ.соцпі); 
са11Рагтѕ-риѕһ ( 'аџоегу=' + ЕҺ1іѕ.1аѕЕКеацџцеѕібігіпд) ; 
са11Рагтѕ.риѕћ( 'таёсһ апукћеге` + ЕһҺіѕ.орёіопѕ.шаёсҺАпуућһеге) ; 
са11Рагтѕ.риѕһ ( 'ідпоге саѕе=' + ЕһҺ1ѕ.орёіопѕ.ісдпогеСаѕе); 
уаг айаіііопа1Рагтѕ = іһіѕ.орііопѕ.геаџеѕіРагамеёегѕ= Е{ []; 
Ғоү( уар 1=0 ; 1 < аааіёіопа1Рагтѕ.1іеподёһ ; 1++ ) 
са11Рагтюѕ .риѕһ{аааіёіопа1Рагтюѕ[і]); 
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// Отправить запрос Ајах 
ајахЕпвіпе.ѕепаКедиеѕі.арр1Іуі ајахЕпвіпе, саПРагтз ); 


Ь т 





Чтобы понять, что же делает данный метод, вначале необходимо рассмот- 
реть механизм ЈауаЅсгірї, используемый в последней строке метода. 


ајахЕпріпе.ѕепаКедиеѕі.арріу( ајахЕпеіпе, сапПРагтѕ); 


Здесь применяется метод арріуО, доступный для всех функциональных 
объектов (подробности — в приложении Б). Проиллюстрируем его использо- 
вание на простом примере. 


Стгееїѓег,ргоїоїуре.вгееіРеорІе = ЃЁипсііоп(ѕ#гі, 84:2) 


{ 
а1Іегі('ҺеПо ' + 311 + 'апа ' + 312) 

Б 

Предположим, что имеется экземпляр Сгееѓег, именуемый Ёгіепа1урег- 
ѕоп, и в качестве аргумента ему нужно передать метод эгее{Реор1е{). Од- 
нако у нас нет параметров удобного для передачи вида, а имеется массив 
элементов реор!е. В подобном случае выгодно использовать метод арріу. 
Соответствующий код можно записать следующим образом: 

уаг реор!е = [ "Јое", "ЗаПу" |; 

ҒгіепаїуРегѕоп.вгееїіРеор1Іе.арріу( Репа !уРегзоп, реор[е); 

Метод арріу () преобразовывает массив, переданный как второй аргу- 
мент, в параметры метода первого класса и вызывает метод на объекте, пе- 
реданном как первый параметр. Таким образом, приведенный код эквивален- 
тен строчке 

Глеп1уРегзоп.огееРеор!е( реор1[0], реорі1е[1)); 


Вернемся к нашей задаче. Нам требуется вызвать метод ѕепаКедиоеѕії () 
процессора ајахЕпвіпе, принимающий в качестве первого параметра ло- 
гическое имя запроса плюс переменное число строковых параметров вида 
Кеу=уаше, представляющих параметры запроса. Здесь нужно быть очень 
аккуратными, поскольку мы запрашиваем параметры из различных источ- 
ников и не знаем, сколько этих параметров. Рассмотрим код еще раз. 

о 


уаг саПРагтѕ - [|]; 
саПРагтѕ.риѕһћ( һіѕ.іа + '^гедиеѕі' ); 


' 


саПРагтѕ.риѕһћ( 'івпоге саѕе=' + #һіѕ.орііопѕ.івпогеСаѕе) ; 


// © 
уаг айаіііопа1 Рагтѕ = {һіѕ.орііопѕ.гедиеѕ{Рагатеїегѕ || [1; 
Гог( уаг 1=0 ; і < аааііопа!1 Рагтѕ.іепеіһ ; 1++ ) 


са! Рагтѕ.риѕћ (аа а1{1опа[Рагтз [1]) ; 


Массив параметров, отправляемый методу ѕепіКедиеѕї () посредством 
арр]у, заселяется смешанной информацией: внутренним состоянием объек- 
та, такими элементами, как идентификаторы и 1а${Кедие$15(1п$, а так- 
же определенными свойствами объекта орііопѕ (например, соипї, шасвАпу- 
уһеге, 1епогеСазе) О. 


Тем не менее необходимо еще обеспечить механизм, позволяющий польза 
вателю компонента передавать помимо указанной информации внешние па- 
раметры ©. Для этого мы проверяем существование свойства объекта ор^ 
(101$, именуемого геапе{Рагатеег$. Если его значение не равно пи, оно 
предполагается равным массиву строк вида Кеу=уаше. Этот массив последо- 
вательно проходится и добавляется к массиву саПРагтѕ, уже заполненному 
параметрами компонента. Наконец, запрос отправляется. 


ајахЕпвіпе.ѕепаКедиеѕі.арріуї ајахЕпеіпе, сапПРагтѕ); 


Все! С отправкой запроса мы разобрались. Теперь будем надеяться, что 
сервер находится в рабочем состоянии, получим ответный документ. Давайте 
разбираться, как мы будем обрабатывать ответ, когда он к нам поступит. 


Предлагаемый текст — обработка ответа Ајах 


Если мы собираемся обеспечить надежную отправку запросов, нам придется 
много поработать, поэтому лучше убедиться в надлежащей обработке ответ- 
ного документа, иначе весь тяжкий труд будет напрасным. Напомним, что 
механизм ајахЕпвіпе (Кісо) направляет запрос к отправившему его методу 
ајахОрааѓеі), передавая содержимое элемента <геѕропѕе>. Следовательно, 
необходимо написать метод а ј ахОрааѓе (), который будет точкой входа в про- 
цедуру обработки запроса. Метод а]ахОр4айеО показан в листинге 10.24 
вместе со своими вспомогательными методами разбора сгеаїеЅиевеѕііопѕО 
и + ЕетепСощеп"(). 


Лислинг 1024. Обработка ответа Ах МННВННННННВН^1 


ајахОрӢаёе: ЕопсЕ1оп( ајахВеѕропѕе ) { 
// Создать предположительные варианты 
ЕҺ1іѕ.сгеасебисддеѕёіопѕ ( ајахВКеѕропѕе ); 
1Е ( ЕҺіѕ.ѕоддеѕііопѕ.1еподіһ == 0 ) { 
ЕҺ1ѕ.һідебиддеѕііопѕ {) ; 
5( ЕҺізѕ.іа + " Һіааеп") уа1ае = ""; 
} 
// Создать и показать пользовательский интерфейс 
е1зе { 
ЕҺ1ѕ.ордааёебиддеѕёіопѕріу{); 
ЕЋ1ѕ. ѕзһоибиддеѕіёіопѕ (); 
еЋ1іѕ.ордаёебе1есёіоп (0); 
} 
// Завершить обработку ответа 
еһіѕ.һапа1іпдВКеаиџеѕі = Еа1зе; 
1Е ( 6515$ .репа1паВеааезе ) { 
еҺіѕ.репаіпдВеацеѕі = ЁҒа1ѕе; 
ЕћЋ1іѕ-1аѕіВедиеѕіѕікіпо = (015$.бСехЕ1прие.уа1ае; 
// Отправить другой запрос 
(р15$. ѕепакесоеѕіҒокбиддеѕііопѕ (); 
} 
и 
сгеаёсебиддеѕііопѕ: Ёцпсііоп (а) ахВезропзе) { 
еҺіѕ.ѕиддеѕёіопѕ * []; 
уаг епігіеѕ ~ а)ахВезропзе .дчеесЕ1етепе ВуТаачМамеЕ ' епетху'); 
Ғор ( уар і = 0 ; 1 < епігіеѕ.1еподёһ ; 1++ ) { 
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уаг ѕёгТехё = &615.чесЕ1етепеСопеейе® ( 
епёгіеѕ [11 .деёЕ1 емепіѕВуТадћате ('бехё') [0] ); 
уаг ѕёгуа1џе = (515$ .дчесЕ1етепеСопеете { 
псу1е$[1].чесЕ1етепеВуТадаМаме ('уа1ое') [0]) ; 
2515$ .зиадезе1оп$.разВ ({ ёехё: ѕігТехі, уа1ае: зехУа1ае }); 




















} 


), 
сеёЕ1етепіСопіёепё: Ёцџпсёіоп (е1емепі) { 
геіџогп е1етепі.Ёігѕісһі1а.даѓба; 











Поскольку мы собираемся сконцентрироваться исключительно на реали- 
зации в нужных местах механизмов Ајах, многие элементы будут рассмотре- 
ны на высоком уровне, а обработка ответа описана алгоритмически. Итак, 
сначала необходимо разобрать отклик посредством метода сгеаѓе5иввеѕ- 
Ноп$ (), преобразовав его во внутреннее представление предлагаемых ва- 
риантов, содержащихся в свойстве ѕирреѕііопѕ. Это свойство представляет 
собой массив объектов, содержащих текст и значение (соответствуют элемен- 
там <{ех{> и <уаше> каждого элемента <епігу> ХМГ-документа). 

Остальная часть алгоритма, метод ајахОрааїе(), достаточно очевид- 
на и понятна. Если предлагаемые варианты не найдены, всплывающее ок- 
но скрывается, а внутреннее значение, хранимое компонентом посредством 
скрытого поля, обнуляется. Если предполагаемые варианты найдены, созда- 
ется раскрывающийся пользовательский интерфейс, заполненный предложе- 
ниями, затем он отображается на экране с первой выделенной позицией. На 
этом этапе запрос считается обработанным, поэтому значение рассмотренного 
ранее свойства #һіѕ.һапаііпо Кедиеѕі устанавливается равным Ё№а15е. Нако- 
нец, метод ајахОрааѓеї) проверяет, имеются ли незавершенные запросы. Ес- 
ли да, значение метки репаӣіпе Кедиеѕі устанавливается равным а15е, 1аѕ- 
{Кеацез{$ 1п> присваивается текущее значение поля ввода и посредством 
зепаКеане{ЕогЗ ие 1оп$() инициируется следующий цикл запроса. 

Таким образом, к концу третьего дня мы получили полный цикл запро- 
са/ответа с поддержкой Ајах. За сегодняшний день сделано довольно много: 
мы разобрались в структуре с открытым исходным кодом, которая позволи- 
ла полностью "активизировать Ајах" (требование 7), а также гарантировали 
возможность настройки и поддержки нескольких экземпляров на одной стра- 
нице (требования 2 и 3). Собственно созданием, размещением, показом и со- 
крытием пользовательского интерфейса мы займемся на пятый день. Пока 
же рассмотрим события компонента и подготовим обработку действий с кла- 
виатурой и мышью. 


10.5.4. День 4: обработка событий 


Теперь, активизировав Ајах в нашем компоненте опережающего ввода, мож- 
но разбираться с событиями, порождаемыми реакцией поля на ввод с клави- 
атуры. Внимательный читатель уже догадался, что код, запускающий этот 
процесс, уже предусматривался в конструкторе, будучи спрятанным в вызове 
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метода іпјесіЅиореѕіВеһауіогі). Данный код инициирует все модификации 
РОМ существующей разметки, включая обработку событий, дополнитель- 
ный ввод, и контейнер для предположений. Все эти модификации програь*: 
мируются, НТМТ-код страницы затрагиваться не будет (см. требование 1) 
Введение требуемого поведения показано в листинге 10.25. 


Листинг 10.25. Введение требуемого поведения 


іпјесіЅоирреѕї Веһауіог: Ғипсїіоп() { 
Ш С һ1і85.15$1Е ) { 
// Убрать взаимодействие с Іпіегпеї ЕхріІогег 
61$. 1ех 1|приЕ, аа осотр1ете= "оЁЁ"; 
} 
уаг ]ЛсеуЕуепНап ег = 
пем ТехіЅиввеѕ#КеуНапаі1ег(ёһіѕ) ; 
// Создать контроллер 
рем Іпѕегііоп.АЁіег( Еһіѕ.іехё1 при, 
"<іприё туре= "гехі" іа-"' + 1615.14 + 
'_ргеуеп заб тт" + 
'" зту1е="а1зр1ау: попе" />'’ ); 
пем Іпѕегііоп.АЁіег( 111$. 1ех 1приЕ, 
'<1приё їуре="һіааеп" паше="' + 
єћіѕ.іа+' һіааеп'+ 
И" 14='"+111$.19+'_В1а4деп' +"'/>' ); 
{6 1$. сгеаебиззе$ {101$ ОТУГ); 
// Создать пользовательский интерфейс 


}5 








Данный метод вначале проверяет, не используется ли Іпѓегпеі ЕхріІогег. 
Если используется, то собственному свойству ащосотр!ее присваивается 
значение оЁ. Благодаря этому встроенные возможности автоматического 
заполнения не взаимодействуют с нашим всплывающим окном. Далее со- 
здается объект ТехібЅивреѕіКеуНапаіег, который будет перенаправлять со- 
бытия нужным методам. Действительно, механика событий достаточно за- 
путана, поэтому мы выделяем поведение в отдельный объект, который рас- 
смотрим чуть позже. Следующий метод вводит несколько входных элемен- 
тов в разметку. Напомним, что в предыдущем цикле разработки кода мы 
добавили скрытое поле ввода для хранения значения компонента и невиди- 
мое текстовое поле, препятствующее отправке формы при нажатии клави- 
ши <Ещег>. Поскольку первое требование технической задачи запрещает 
вмешиваться в НТМГ-код, вся "грязная работа" выполняется программно — 
с помощью двух вызовов 1пзегоп.АЁег(). Возможность использования 
Гпзег(1оп. АЙег() появилась благодаря библиотеке Ргоѓоїуре. Наконец, вы- 
зывается функция сгеаїеЅиевеѕііопѕ Юіу(), создающая элемент у, вмеща- 
ющий пользовательский интерфейс с предлагаемыми вариантами. 


Объект ТехіЅиддеѕіКеуНапаіег 


Как уже говорилось выше, распределение событий мы решили вынести в от- 
дельный класс контроллера. В таком решении нет ничего нового или необыч- 
ного, просто так удобнее разделить ответственность класса. В реальной жиз- 
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01 можно еще отделить все компоненты дизайна, создав явные классы модели 
„ представления и обеспечив полный шаблон МУС Это предлагается сделать 
читателю в качестве самостоятельного упражнения, но в главе 13 будет пока- 
зано, как разбить архитектуру приложения чтения К55-сообщений на набор 
классов, согласующихся с традиционным шаблоном МУС. 

Контроллер создается точно так же, как и основной класс, — с исполь- 
зованием С1аѕѕ.сгеаіе() и метода іпіѓіа1іхе(). Конструктор Тех{из- 
веѕ{КеуНапаіег показан в листинге 10.26. 


Листинг 10.26. Конструктор ТехіЅиввеѕіКеуНапӣіег 
Тех Зиое${КеуНап Мег = С1аѕѕ.сгеаѓе(); 
Тех Зиоое{КеуНапег.ргото“уре = { 
іпібіа1іле: Ғопсііоп( ќехіЅирвеѕі ) { 
1һ15Ѕ.ќехїіЅирреѕі = їехібироеѕі; 
{01$.1приё = (һ15.іехіЅирреѕі.іехі1приќ; 
// Ссылка на ТехіЅирвеѕі 
1ћіѕ.ааа КеуНапаі1іпе(); 
ћ 
// остальная часть АРІ 
Ь 





щ 


В процессе создания контроллер использует ссылку на компонент опере- 
жающего ввода, атакже "родное" поле ввода НТМІ -формы. Затем с помощью 
15.аааКеуНапаіпе0О он добавляет в поле ввода обработчики событий. Ме- 
тод аїакеуНапаіпе() показан в листинге 10.27. 


Листинг 10.27. Обработчик действий с клавиатурой 


а4а4КеуНапаПп?: Ғипсііоп() { 
ћ15.іприё.опКкеуир = 
15. кеуирНапаїіег.БіпаАѕ Еуепі іѕіепег(ёһіѕ); 
1ћ1іѕ.іприѓ.опкеуаомп = 
15.Ккеуаоуп Нап ег. 11а Аз Еуеп 1 іѕіепег(іһіѕ); 
(61$ 1при.опбшг = 
(615. оп агНап ег. 6119 А$ Еуеп{11${епег(11$); 
Ш ( 15.15Орега ) 
һіѕ.іприё,опКкеургеѕѕ = 
{615.КеуирНап ег. 6104 Аз Еуепі іѕіепег(ёһіѕ); 


В данном методе устанавливаются все события, наступление которых тре- 
буется отслеживать, а также код для браузера Орега, упоминавшийся в пер- 
вом цикле разработки данного сценария. Напомним, что метод БшаАзЕу- 
еп 1.15 {епег ( ) представляет собой механизм замыкания, полученный благо- 
даря библиотеке Ргоіоїуре. Данный механизм позволяет нашим обработчи- 
кам вызывать методы первого класса на контроллере и сводит к общему зна- 
менателю модели событий Пиегпе Ехр]огег и \ЗС. Очень хорошо. Методы 
КеуирНап егО, Кеудомп Нап ег(), оп шгНавп ег () и их вспомогательные 
методы представляют собой реструктуризированный вариант уже рассмот- 
ренного кода (с минимальными изменениями). Все эти методы будут описаны 


ниже с указанием их отличий от первоначального сценария. Начнем с обсуьк- 
дения метода КеудомпНапа1 ет () , показанного Б листинге 10.28, итого, какон 
обрабатывает выделение. 


КеуаоутНапа1ег: Ёопсёіоп (е) { 
уаг прАгком = 38; 
уаг Яо\пАгкгом = 40; 
іЁ ( е.КеуСоде =- џрАггои ) { 
еһіѕ.сехібиддезѕіё . тоуебе1есііопур (); 
зесТ1теоч® ( Еһіѕ.поуеСагеёТоЕпа. ріпа (11$), 1); 








} 
1ѕе 1Е ( е.КкеуСойе == аомпАгком ) { 





еҺіѕ.ёсехёбиддеѕіЕ .моуебе1есетопроут (); 


= г 

Наиболее существенные отличия от исходного сценария с точки зрения 
функциональных возможностей претерпела обработка клавиш со стрелками. 
В компоненте Тех ие клавиши со стрелками управляют движением вы- 
деления, основываясь на событии опКеудо\п, а не на опКеуир. Это сделано 
исключительно для повышения практичности. Иногда пользователя сбивает 
с толку то, что выделение остается на своем месте при нажатии клавиши и на- 
чинает перемещаться после того, как клавиша отпущена. В общем, переме- 
щение выделения обрабатывается методом Кеудо\пНап ег (). Обратите вни- 
мание на то, что методы управления выделением являются методами компо- 
нента ТехіЅирреѕі. Поскольку контроллер во время создания записал ссылку 
на компонент, он может вызывать эти методы посредством объектной ссыл- 
ки 1115. {ех{3 155651. Для полноты изложения мы приводим в листинге 10.29 
методы управления визуальным выделением. 





Листинг 10.29. Методы Техібиддеѕї, отвечающие за визуальное выделение п 


гаоуезе|еснопОр: Ғипсііоп{) { 
Ш ( 1115. зе1естеа|таех > 0 ) { 
1ћіѕ.ираӢаїіеЅеІесїіоп(іһіѕ.ѕеіесіеаїіпаех - 1); 
} 


Б 


поуебе1есёіопроип: Ёопсііоп () { 
1Е ( ЕҺіѕ.ѕе1есёеа1пӣех < (ЕһҺіѕ.ѕиддеѕііопѕ.1еподёһ - 1) ) { 
СҺ1іѕ.џрдӢаёеѕЅе1есіёіоп<іћіѕ.ѕе1есіеа1пдех + 1); 


} 
Ь 


џрдӢаёебе1есііоп: ЕапсЕ1от (п) { 
уаг зрап = $ (Еһіѕ.іа + "_"+Еһіѕ.ѕе1есіеа1паех) ; 
1Е (ѕрап) { 
ѕрап.ѕёу1е.раскагоцпасо1ог = ""; 
// Очистить предыдущ выделени 
} 
єҺ1іѕ.ѕе1есіеа1паӣех = п; 
уах зрап = 5 (ЕҺіѕ.іа+"_"+Еһіѕ.ѕе1есёеа1паех) ; 
1Е (ѕрап) { 








ѕрап.ѕбу1е.раскодгоџпасоіог = 
61$ ‚ орЕ1оп$. зе1есе1опСо1ог; 


Реальную работу по изменению визуального состояния выделенного эле- 
мента выполняет метод ирӣаїеЅе1есііоп(). Он обновляет элемент зрап, 
созданный в списке выбора (соответствующий код мы напишем на пятый 
день), и устанавливает его свойство 51у1е.БаскегоипаСо|[ог равным значе- 
нию, заданному как орНоп$.зе|1есНопСо[ог в объекте Сопёівигаііоп на- 
шего компонента. 


Перед тем как закрыть тему обработки нажатия клавиш, следует учесть 
еще один момент. Поскольку при обработке действий с клавишами мы учи- 
тываем их нажатие, а не отпускание, необходимо изменить значение клавиши 
со стрелкой вверх с поведения по умолчанию на перемещение назад каретки 
в текстовом поле. Для этого применяется метод тоуеСагеіТоЕпаї), вызы- 
ваемый с миллисекундной задержкой (реализована с помощью зе Типеоц®. 
Реализация метода тоуеСагеіТоЕпаі) приведена в листинге 10.30. 


Листинг 10.30. Метод тоуеСагеТоЕпа () компонента ТехіЅисреѕі * '9| ЩН 
тоуеСагеТоЕпа: Ғиопсііоп() { 
уаг роз = ёһіѕ.іприё. уа1іце.Іепеїһ; 
1 (101$.1приЕ. ѕеќЅеіесііоп Капзе) { 
{61$.1приЕ. ѕеїЅе1есііоп Капзе (роз, роз); 


е1ѕе 1#((01$.1прит. сгеаќе Техї Капве) { 
уаг т = #һіѕ.іприѓ. сгеаѓе Тех{ Капзе\{); 
т.тоуе$Ѕіагі('сһагасіег’, роз); 
га.соПарѕе(); 
т.ѕе1есі(); 


} 
Ь 





Рассмотрим теперь обработку отпускания клавиш. Реализация отпуска- 
ния немного проше, чем реализация нажатия клавиш. Все, что требуется, — 
это перенаправить событие, учитывая текст в поле ввода и нажатую клавишу. 
Рассмотрим подробнее код, приведенный в листинге 10.31. 


Листинг 10.31. Обработка в ТехіЅиддеѕї отпускания клавиш : у 
КеуорНапа1ет: Ғоџпсёіоп (е) { 
1Е ( Еһіѕ.іприё.1еподёһ == 0 && 1!661$.1зОрека ) 
ЕҺіѕ.Ебехібиддезі . пі деЅиддеѕііопѕ (); 
1Е ( '"©һіѕ.Һапа1едѕресіа1Кеуѕ (е) ) 
ЕҺіѕ.бехібисдадеѕіё . һапа1еТехё1приё () ; 
Ь 
Һапа1едбресіа1Кеуѕ: Ёџпсёіоп (е) { 
уаг епіегКеу = 13; 
уаг прАггом = 38; 


уаг аомпАггоит • 40; 
1Е ( е.КеуСойе == прАгком ІІ е.КеуСойе == Чо\тАгком ) { 


гесигп гие; 





1ѕе 1Е ( .КеуСойе == епёегКеу ) { 
ЕҺіѕ.сехібЅисддезі . ѕзеёІприёЕгомЅе1іесііоп{); 
геіџгп гие; 





} 
геёогп Ёа1іѕе; 
Ед Е 





Обработчик отпускания клавиш вначале проверяет, содержится ли текст 
в поле ввода. Если нет, он сообщает компоненту ТехіЅиереѕі скрыть всплы- 
вающий список предлагаемых вариантов. Далее обработчик проверяет, не 
была ли нажата одна из специальных клавиш: клавиша со стрелкой вверх, 
клавиша со стрелкой вниз или <Ещег>. Если была нажата одна из кла- 
виш со стрелками, метод не выполняет никаких действий, поскольку нажа- 
тие этой клавиши уже было обработано. Однако если была нажата клавиша 
<Ещег>, метод сообщает компоненту ТехіЅирреѕі установить входное значе- 
ние на основе выбранной в текущий момент позиции списка предположений. 
Наконец, если поле ввода содержит значение и нажатая клавиша не являет- 
ся специальной, то обработчик сообщает компоненту Тех $ие$ о наличии 
некоторого входа, который нужно обработать с помощью метода {ех(зиз- 
сгез{.Вап еТех Ипри{(). Данный метод компонента Тех{ $ ие5 в конечном 
счете активизирует структуру Ајах, которую мы успешно настраивали вчера. 
Код обработчика Нап еТех{!при{() представлен в листинге 10.32. 


;• Листинг 2 попот 98 ввола текста "ШЯШШШИИВ;. > 
папе Техіпрус псбйоп{) { 
уаг ргемоцѕКедиеѕї 


һі8. Та опе рЫ 
// Предыдущее запрашиваемое значение 
{61$. [аз КедиеѕіЅігіпе = 
61$. ехЕ[ приЕ.уа1ще; 
// Текущее запрашиваемое значение 
Ш { 1615. [аз КеачезЕ тив == "" ) 
{61$. 614е5из2е$1101$(); 
е1ѕе Ш ( 1115. 1а5{ Кеацези $ 1г1п# |= ргеуіоиѕ Кедиеѕї ) { 
{015. зепа Кедиеѕї ҒогЅ ирреѕііопѕ(); 
// Запрос данных средствами Ајах 


} 
т - М 





Вначале метод Нап 4еТехИпри {О устанавливает значение локальной 
переменной ргеуіоиѕ Кедиеѕї равным предыдущему значению їһіѕ.1аѕї- 
КедиеѕіЅігіпе. Затем он устанавливает значение свойства 1ІаѕіКедиезѕі- 
Ѕігіпе равным текущему содержимому поля ввода, так что теперь мож- 
но сравнить эти два значения и убедиться, что мы не пытаемся запросить 
ТУ информацию, которая у нас уже есть. Если запрос представляет собой 
пустую строку, всплывающий список будет скрыт. Если запрос отправлен 
для получения новой информации, метод вап 1еТех Ипри{() вызывает ме- 
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„од зеп4Кеаие$(ЕогЗизезИоп$() (который мы написали вчера) для вызова 
основанного на Ајах источника данных и получения с сервера ряда предпо- 
ложений. Если запрос идентичен последнему посланному запросу, никакие 
действия не предпринимаются. Похоже, что наконец-то фрагменты начина- 
ет собираться в общую картину. Создание, настройка конфигурации, работа 
инфраструктуры Ајах, обработка событий — мы действуем так, как будто 
знали, что придется делать. Идем впритык — сейчас уже четвертый день 
работы! 

Класс контроллера должен охватывать еще один класс — обработчик со- 
бытий оп Маг, который представляет собой очень простой метод, устанавли- 
вающий значение текстового поля согласно текущему выделению и скрываю- 
щий предлагаемые варианты. Его реализация выглядит следующим образом: 

опріогНапаїег: Ёџпсёіоп (е) { 

1Е ( Еһіѕ.бехібиддеѕі .ѕзисдсдеѕііопѕріу.ѕіу1е.діѕр1ау == " ) 
Ећ15ѕ.сехібиддеѕіЕ . ѕзеі1 приёЕготЅе1есііоп (); 
ЕҺ15ѕ.сехібиддеѕі . пі дебиддеѕііопѕ (); 

} 

Обработчики оп шгНап ег и вап еазрес1а1Кеуз обращаются к мето- 
ду компонента Тех и25е$, который мы еще не рассматривали, — зе Ипри{- 
Егошбе@есйоп (). По сути, этот метод делает то же, что делала ранее функ- 
ция 5е{Тех{() — принимает выделенное в текущий момент предположение; 
присваивает свой текст полю ввода, а значение — скрытому полю; скрывает 
список предположений. Реализация этого метода приведена ниже. 





зе 1присЕтомбе1есе1от: ЕапсЕ1оп() { 
уаг һіадеп1приё « $( &015$.1а + "_Һіааеп" ); 
уаг ѕидсеѕёіоп ~ (01$.зиааезЕ1от$[ ёһіѕ.ѕе1есёеаіпӣех ]; 
еҺіѕ.Еехі1приё.уаїџе = ѕиддеѕііоп.іехі; 

// Обновить видимое значение 

р1ааеп1прое.уа1ае = ѕиддеѕёіоп.уаіпе; 
// Обновить скрытое значение 
ЕҺ15ѕ.һідеѕиддеѕёіопѕ (); 

} 

Возможно, для выполнения всего, что было запланировано на сегодня, 
пришлось немного поработать сверхурочно. Однако в результате мы создали 
класс сопігоПег, обрабатывающий все, что касается управления события- 
ми. Для автоматического создания замыканий и унификации моделей собы- 
тий Пиегие ЕхрІогег и МЗС мы использовали метод БіпаАѕЕуепі1 іѕќепег() 
библиотеки Ргоіоїќуре. Мы реализовали обработчики нажатия/отпускания 
клавиш, скрывающие в себе все сложности обработки выделенной позиции 
и обычного текстового ввода. Мы гарантировали, что запросы будут отправ- 
ляться только для получения новой информации; разобрались с показом и со- 
крытием в нужные моменты пользовательского интерфейса; программно 0б- 
новили ПКМ для управления скрытым входным значением и невидимым тек- 
стовым полем, предотвращающим отправку формы при нажатии клавиши 
<Ещег>. Кроме того, мы обработали обновление скрытого и видимого зна- 
чений компонента Тех{$и25е${. На пятый день мы доведем до ума и реструк- 
туризируем наш компонент, реализовав все методы, требуемые для создания 
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всплывающего окна, размещения его в нужном месте, показа и сокрытия 
а также обработки событий, связанных с мышью. Неясный свет в конце тун- 
неля становится все ближе и отчетливее. 


10.5.5. День 5: пользовательский интерфейс всплывающего 
окна с предлагаемыми вариантами 


Теперь, когда мы полностью вошли в работу, пришло время разобраться со 
всеми незавершенными моментами. Пока что мы создали инфраструктуру 
для обеспечения настроек и значений по умолчанию, обработку запросов и от- 
ветов Адах, а также события, которые все это связывают. Остались вопросы 
графической реализации. Относительно пользовательского интерфейса необ- 
ходимо решить следующие вопросы. 


Ы Создание пользовательского интерфейса всплывающего окна с предлага- 
емыми вариантами. Это подразумевает создание элемента іу для списка 
и элемента ѕрап для каждого варианта. 


е Размещение всплывающего окна в нужном месте. 
• Заполнение всплывающего окна предлагаемыми вариантами. 
• Показ и сокрытие вариантов. 


Создание всплывающего окна с предлагаемыми вариантами 


Вернемся немного назад и рассмотрим реализацию метода іпјесіЅиввеѕі- 
Веһауіог (). Напомним, что данный код представлял собой точку входа для 
всех манипуляций РОМ, производимых компонентом ТехіЅиореѕі. 


іпјесібиереѕіВеһауіог: ҒЁопсіоп{і) { 
// Введение поведения ПОМ НТМЕ 
1ћіѕ. сгеаеби зе 1оп$ Юіу(); 


В последней строке метода іпјесіЅиввеѕіВеһауіог() вызывается ме- 
тод сгеаќе$иввеѕііопѕ Ю1у(), создающий самый внешний контейнер іу 
всплывающего окна с предлагаемыми вариантами. Поскольку это контей- 
нер всех артефактов СІЛ, именно с него логично начать рассмотрение ко- 
да пользовательского интерфейса. Подробности его реализации показаны 
в листинге 10.33. 


Листинг 10.33. Создание пользовательского интерфейса окна с вариантами 


среаёеЅисдсеѕііопѕріу: Ёоцпсёіоп{) { 
Еһіѕ.ѕиддеѕііопѕріу = Яосотмепіё . сгеаіеЕ1епепі ("а1у"); 
// О Создать элемент іу 
51$. оддезЕ1оп$01у.с1азМаме - (615$ .орЕ1оп$. ѕидсдеѕіріус1аѕѕМате; 
// © Определить стиль элемента @1у 
уаг аіубіу1е = Еһіѕ.ѕцддеѕііопѕріу.ѕіу1е; 
// © Добавить стиль поведения 
діуЅіу1е.роѕібіоп = 'арѕоїџёе`; 
аіуѕёу1е.21паех = 101; 
даіуЅёу1е.ӣаіѕріау - "попе"; 
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/ /О Вставить в документ 
(615. сехі1приё .рагепімоде.аррепасһі1а (Ећ1ѕ.ѕиддеѕііопѕріу); 


Метод создания контейнера имеет четыре основных обязательства, пере- 
численных в листинге. Прежде всего он должен создать элемент іу посред- 
ством АРІ сгеаѓіеЕІетепі () документа О. Далее он должен определить стиль 
элемента Чу согласно клиентской конфигурации ©. Напомним, что одно из 
технических требований заключалось в том, чтобы стили С$5 каждого эк- 
земпляра компонента допускали индивидуальную настройку. Для этого атри- 
бут сІаѕ$ Мате элемента іу устанавливается согласно свойству завез ГЛу- 
С1аѕ5 Мате объекта опций. Значение этого свойства по умолчанию было зада- 
но (в методе ѕеїОрііопѕ) равным ѕиереѕіріу. Таким образом, если пользова- 
тель не укажет явно иное значение свойства, мы получим значение по умолча- 
нию. Данное решение удобно, поскольку оно позволяет клиенту использовать 
таблицу стилей по умолчанию с нашими именами классов для определения 
стилей всех экземпляров компонента ТехіЅиореѕї, используемых в приложе- 
нии. Кроме того, можно предоставлять и другие таблицы стилей (например, 
заказные или реализованные в продукте), переопределяющие стандартные 
имена стилей. Кроме того, значение параметра ѕивреѕіріУуСІаѕѕ$ Мате может 
переопределяться на самой странице, формируя стилевое оформление ком- 
понента в пределах страницы или экземпляра. Звучит достаточно гибко. 

Существуют определенные аспекты стиля всплывающего окна, которые 
мы не можем менять и которые относятся к поведенческим стилям, поэтому 
определяем их стиль явно, используя атрибут ${1у[1е элемента ©. Обратите 
внимание на то, что любой стиль, установленный программно посредством 
атрибута ѕїуІе, переопределяет все, что задано с помощью атрибута С85 
с1а5$Мате (обычно для этого используется таблица стилей). Перечислим упо- 
мянутые аспекты. 


• Объявление роз {10оп='абзоПие' (компонент должен управлять положе- 
нием элемента іу). 


. Объявление 7ш4ех=101 (всплывающее окно должно располагаться по- 
верх любого другого элемента страницы). 


• Объявление 41зр!ау="попе" (всплывающее окно должно скрываться от 
пользователя до тех пор, пока его не активизирует ввод с клавиатуры). 


Обратите внимание на то, что значение 101 переменной 7ш4ех выбра- 
но практически произвольно. Наконец, метод вводит элемент іу в документ 
в качестве потомка текстового поля О. Родительский элемент в данном случае 
значения не имеет, поскольку Чу будет располагаться посредством абсолют- 
ного позиционирования. 


Размещение всплывающего окна 


Если мы создали всплывающее окно, рано или поздно его потребуется пока- 
зать, но до этого его необходимо разместить в нужном месте При отображе- 


нии всплывающего окна на экране требуется, чтобы оно располагалось срази 
под текстовым полем и выравнивалось по его левому краю. Метод роѕіїіоп- 
Ѕиевеѕііопѕ Юіу, выполняющий данные действия, приведен в листинге 10.34. 


Листинг 10.34. Размещение всплывающего пользовательского интерфейса ·• 
роѕіёіопѕиддеѕёіопѕріу: ЕопсЕ1оп!) { 

уаг ёехірРоѕ = Вісоуі11. ЕоросомепЕРоѕіііоп { Ећіѕ.бехі1прие); 

уагх дӢіуЅіу1е = ёһіѕ.ѕиддеѕііопѕріу.ѕіу1е; 

аіуЅіу1е.Еор = (ёбехЕРоѕ.у + Еһіѕ.сехе1приі .оЁЁѕеіНеідћһі) 

+ "рх"; 
діуѕбу1е.ІеЁё = ёехіРоѕ.х + "рх"; 
1Е ( Еһіѕ.орёіопѕ.таісһтТехііаёєһ ) 
аіубёу1е.міаєһ = (Еһіѕ.сехі1приё.оЁЁѕеёиіаєһ — 
єҺіѕ.раааіпд()) + "рх"; 


Е) = 


Напомним, что в предыдущей версии сценария мы написали метод для 
расчета абсолютного положения текстового поля. В реструктуризированной 
версии мы будем полагаться на вспомогательный метод от Шсо — їороси- 
тепРоѕіїіоп(). Все, что требуется, — использовать данный метод для полу- 
чения опорной точки и выполнения соответствующих расчетов, помещающих 
всплывающее окно ниже текстового поля, выровненным по его левому краю. 
Затем мы проверяем существование конфигурационной опции таісһҺТех- 
ТУЛА, и если ее значение равно {гие, то задаем ширину элемента іу равной 
ширине введенного текста. Обратите внимание на то, что мы выровняли ши- 
рину с помощью значения заполнения. Это было необходимо, поскольку стиль 
элемента іу может задаваться извне с помощью класса С$5. Мы не знаем, 
какие поля и границы пользователь приписал нашему компоненту, возмож- 
но, они нарушат наше визуальное выравнивание по ширине текстового поля. 
Поэтому напишем метод райаӣіпе() (листинг 10.35), который вычислит вели- 
чину заполнения и полей слева и справа, а затем вычтет их из общей ширины. 


Листинг 10,35. Расчет заполнения[слева и справа 
рааа1та: Ёцпсёіоп() { 
Суу { 
уар ѕіу1еЕоцпс = ВКісоуіі1.деёсЕ1емепеѕСоприёеаѕіу1е; 
уаг 1Раа = ѕіёу1еЕоџпс( ёһіѕ.ѕиддеѕііопѕріу, 
"рааалпаьеЕе", 
"раааіпа-1еғі" ); 
уаг тРаа = ѕіу1еЕопс( ёһіѕ.зоддеѕііопѕріу, 
"раааіповіосће", 
"раааіпао-гічћё" ); 
уаг 1Вогаег = зѕіу1еЕопс( ёһіѕ.ѕзиддеѕёіопѕріу, 
"рокаегІеЁісуиіаєһ", 
"рогаег-1е#ё-міаёһ" ); 
уаг гВогӣаег = ѕіу1ІеЕопс( Еһіѕ.ѕиддеѕііопѕріу, 
"рогаегвічћіміаёһ" , 
"рогаег-гісһё-міаёһ" ) ; 
1Раа = іѕмам(1Раа) ? 0 : 1раа; 
гРаа = 15МаМ(гРаа) ? 0 : тРаа; 
1Вогаег = 1$МаМ (1Вогаег) ? 0 : 1Вогаег; 








гВогаег » іѕМам№ (гВогаег) ? 0 : тВогаег; 
геёогп рагѕеіпё (1Раа) + рагзе1пе (гРаа) + 
рагѕеіпё (1Вогаег) + рагѕеіпі (гВогаег) ; 
}саєсһ (е) { хебаки 0; } 


К 


Баса + 





Чтобы получить рассчитанный стиль элемента (действительное значение 
атрибута, вне зависимости от того, как оно было задано), придется немного 
потрудиться. Для решения этой задачи Пиегпе{ ЕхрІогег предлагает собствен- 
ный атрибут сиггепіѕіуІе для каждого элемента, браузеры Мо7Ша исполь- 
зуют метод ге Сошрщеа У е () свойства ӣеѓаџќуіеж документа. Все эти 
механизмы требуют также конкретной спецификации запрашиваемого атри- 
бута. Атрибут сиггепіѕіуІе (Іпѓегпеї ЕхрІогег) ожидает, что внешний вид 
будет задан с помощью связывания в стиле ЈауаЅсгірі (например, Бог4ег- 
ВМ), тогда как ғеСотриѓейЅіуІе() (МохШа) ожидает, что атрибуты 
будут заданы согласно синтаксису таблиц стилей (например, Бог4ег-г126{- 
у1а1). К счастью, библиотека Кісо предлагает метод, решающий все эти про- 
блемы, — К1со 011. се етеп{5Сошри{еа51у[е(). От нас требуется только 
передать ему элемент, имя атрибута Іпіегпеї Ехрогег и имя атрибута МохШа, 
а метод возвращает значение. В данном случае метод принимает величину 
границ и полей слева и справа, суммирует их и возвращает результат. 


Метод Кісо.веіЕ1етепіѕСотриѓеаѕѓу1е() известен некорректной рабо- 
той с некоторыми версиями Ѕаѓагі, поэтому мы вручную задаем возвращаемое 
значение по умолчанию в блоке їгу.. .саѓсћ. 


Содержимое всплывающего окна 


Итак, у нас есть код, создающий и размещающий всплывающее окно. 
Далее требуется написать метод, заполняющий это окно предлагаемы- 
ми вариантами. Напомним, что метод а]ахОрдайеО разбирает ответный 
ХМЕ-документ, превращая его в массив объектов-предположений. Кроме 
того, если существует хотя бы одно предположение, вызывается метод 
{015$ .ирӢаѓе5ивевеѕііопѕ Юіу(). Данный метод преобразовывает внутреннее 
представление набора предлагаемых вариантов в реальные элементы зрап 
всплывающего окна (элемента іу). Рассмотрим, как это происходит. 
ирааѓќеЅиереѕіопѕ Оіу: РапсНоп() { 
1115.509реѕпопѕріу.іппегНТМІ. = 
// Удалить предыдущий контекст 
уаг ѕиввеѕііпеѕ • > 1115$, сгеаѓіеЅ$иввеѕііоп5рапѕ(); 
// Создать новый контекст 
Гог (уаг і = 0; і < ѕиввеѕї[іпеѕ.Іепеһ; і++) 
161$. 31526511015 Оіу.аррепасћі1а(ѕоиввеѕі і іпеѕ[і]); 


ин. 


), 

Данный метод обманчиво прост — на самом деле предстоит еще многое 
сделать. Указанный метод устанавливает значение свойства шпегНТМГ, эле- 
мента ѕиѕреѕііопѕ Юіу, созданного ранее в виде пустой строки (чтобы уни- 
чтожить все предыдущее содержимое). Затем вызывается функция сгеаїе- 
ЅиевеѕііопЅрапѕ (), создающая блок зрап для каждого варианта в массиве 
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предложений. Наконец, созданные блоки последовательно обрабатываются 
и добавляются к элементу Чу. Вот здесь уже начинается реальная рабо- 
та. Рассмотрим подробнее функцию сгеаїіеЅирвеѕііопЅрапѕ (), приведенную 
влистинге 10.36, и разберем, как создаются блоки-варианты. 


Листинг 10,36. Создание позиций списка предлагаемых вариантов 


сгеасебоаае1опбрапз: Ёџпсёіоп() { 
уаг гедЕхрЕ1Іадѕ «• ""; 
1Е { Еіѕ.орііопѕ.ісдпогеСаѕе ) 
гедЕхрЕ1адѕ - '1'; 
маг вбаевесдехо = "т 
1Е { 6015$.орЕ1оп$ .мабсВАпуущтехге ) 
біагіведЕхр = ''; 
уаг гедЕхр пем ВедЕхр( збагЕсВедЕхр + 
еҺіѕ.1аѕЕВКедиеѕёе5 гіпа, 
гедЕхрЕ1адѕ ); 


























уаг ѕисдсеѕііопбрапѕ = [}; 
Ғог ( уаг 1 = 0 ; і < Еһіѕ.ѕиддеѕеіопѕ.1еподіһ ; 1++ ) 
ѕзиддеѕііопдрапѕ .риѕћ ( 
ЕҺ15.сгеаёсебиддеѕііопЅрап( 1, кедЕхр ) ); 
геёогп ѕиддеѕёіопдрапѕ; 














Данный метод вначале изучает объект опций и находит значение свойств 














ідпогеСаѕе и паёсһАпууүћеге. Благодаря этому мы определим соответству- 


Ю 


щие параметры регулярного выражения, которое облегчит извлечение из 











ответного документа части строки, совпадающей с текстом, набранным поль- 














зователем. Затем метод последовательно обрабатывает свойство ѕиддеѕііопѕ 
(массив объектов, имеющих свойства .іехі .хаіџе). Для каждого предла- 
гаемого варианта в массиве вызывается метод сгеаёеѕџиоддеѕі1іопЅрап () с но- 
мером предположения и созданным ранее регулярным выражением. Таким 


образом, всю основную работу выполняет метод сгеаёебиддеѕііопЅрап 
показанный в листинге 10.37. 












































), 


























Листинг 10.37. Создание блока с предлагаемым вариантом 
сгеасебисддеѕёіопбрап: Ёџпсёіоп( п, кедЕхр ) { 


уаг ѕзисдсдеѕііоп = ёһіѕ.ѕиддеѕііопѕ [0]; 
уар ѕиддеѕііопЅрап = доситепі . скеаёеЕ1етмепі ("зрап"); 
ѕиддеѕііопбрап.с1аѕѕМаме = Еһ1іѕ.орііопѕ.ѕидсдеѕііопс1аѕѕмапе; 
ѕиддеѕііопбрап. ѕіу1е, міаёһ =* '100%'; 
зиааезе1опбрап.з6у1е.Я1зр1ау = 'ЫЬ1оск'; 
ѕзоддеѕііопбрап. іа = Єһіѕ.іа + " "+1; 
ѕидсдеѕііопбрап.оппоиѕеоуег = 
Ећізѕ.поцѕеоуегНапа1їег.ріпадѕЕуепі11ѕіепег (51$); 
ѕзоддеѕііопбрап.опс1іск = 
ећіѕ.іёетс1іскНапа1ег.ріпадѕЕуепі11ізіепег (ёһіѕ); 
уаг ёехіуа1џеѕ - ЕҺіѕ.ѕр1іёТехіуа10џеѕ ( ѕиддеѕёіоп.ёехё, 
ЕҺ15ѕ.1аѕіВеацеѕібігіпо.1епоёһ, 
гедЕхр ); 
уаг ёехёМаїсһбрап = Яоситепі . сгеаёеЕ1епепё ("зрап"); 
сехЕМаёсһЅрап.іа - Єһ1іѕ.іа + "_таєсһ_" + п; 




















сехіМаїсһбрап.с1аѕѕмаме = 
сехЕМаёсһЅрап.оптоџѕеоуег 
Еһіѕ.поцџѕеоуег 
Єесһбрап.опс1іскК = 
ЕҺіѕ.ібетмс1ісКк 
сехЕМаёсһЅрап.аррепасћһі1а ( 
дӢосотепёі . сгеасеТехЕМоае ( 


сехЕМа 


п 
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Еһіѕ.орііопѕ.таёсһс] 


Напа1ег.ріпадѕЕуепі] 
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|аззМаме ; 


Г1 серег (іёһізѕ); 








Напа1ег.ріпадѕЕуепі] 


сехіуа1џеѕ.тіа) ); 





зосдӯдезііопбрап.аррепасһі1а 
даосотепі . сгеаёсеТехіМоае ( 


( 


хіуа1пџеѕ.ѕіагё) 








5чаае5 











сіопЅрап.аррепасһі1а (сехімМаёсһбрап) ; 
зосдӯдезііопбрап.аррепасћһі1а ( 
ТехЕМоае (ЕехЕ\Уа1аез.епа) ); 


аосотепі . сгеаё 
геёигп ѕзисдсдеѕііопбрап; 
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1іѕіепег (іёһіѕ); 
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Задача кажется непосильной, но сдаваться еще рано. Данный метод, воз- 
можно, выглядит сложнее, чем он есть на самом деле, хотя он действительно 
отвечает за многое. Пожалуй, стоит немного притормозить и рассмотреть его 
с точки зрения результата: получения НТМІ-кода предложений. Представим 
НТМІ-разметку предлагаемого варианта, которая выглядит примерно следу- 
ющим образом: 

<ѕрап>реЁоге <ѕрап> 

паёєсһіпд ёбехі 

</ѕрап>, апа аЕсег< /зрап> 

Мы сильно упростили реальную картину, чтобы проиллюстрировать 
структуру. Предположим, что пользователь ввел слова "таёсһіпо бехі", 
а в базе данных имеется значение "реЁоге паёсһіпа ёбехё, апа аЁЕбех". Это 
значение будет предложено в качестве предполагаемого варианта, но, кроме 
того, с элементом ѕрап будут связаны дополнительные атрибуты, облегчаю- 
щие идентификацию, стилевое оформление и обработку событий. Работу по 
отсечению фрагментов текста до и после соответствия выполняет следующая 
строка кода: 

уар сехіма1цџеѕ = іһіѕ.зр1іёТехёуа1пеѕ ( 

ѕзидсдеѕііоп. бехе, іһіѕ.1аѕёВесдиеѕёеб гіпо. 1епаодёһ, кедЕхр); 

Возвращенное значение сехЕУаТаез представляет собой объект, имеющий 
три свойства: .ѕзіагі, .ила и .епа. Таким образом, в приведенном примере 
сехеУа1Таез — это объект, который выглядит приблизительно так: 

сехёуа1пџеѕ = { ѕёбагі: 'Юреѓоге ', 

аа: 'пассһіпо бехі', 
епа: ', апа а#ёег }; 

Наконец, ниже показана реализация метода ѕр1ііТехіуа1іпџезѕ (). 

$р11ЕТехЕ\Уа1аез: ЕапсЕ1оп{ сехе, Іеп, гедЕхр ) { 

уаг зсакЕРоз = сехё.зеатсВ (гедЕхр) ; 
уаг птаєсһТехі = сехё.заюзЕк1па( ѕіагіЕРоѕ, збакЕРоз + 1еп ); 
уаг ѕёагёТехі = збагЕРоз == 0 ? 

тт сехі . ѕирѕігіпа (О, збакЕРоз); 


уаг епатТехіё сехі . ѕзирѕігі 
тебоги { ѕбагі: ѕёагітТехі, 


по ( збсакЕРоз + 1еп 
піа: таёсһтТехі, 


); 


а: епатехіё }; 





п 
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Рассмотрев структуру блока предлагаемого варианта, поговорим о важ- 
ных атрибутах, сгенерированных для блока. Внешний и внутренний бло- 
ки создаются с именами классов С$8 на основе значения свойств $1$5е$- 
попС1Іаѕѕ Мате и таісҺСіаѕѕ Мате объекта Орііопѕ соответственно. Благодаря 
классам С88 полностью настраиваемым является не только ѕиввеѕііопѕ Оіу 
но и вся внутренняя НТМГ-структура каждого предлагаемого варианта. 

Из других важных атрибутов, генерируемых в блоке, стоит упомянуть 
идентификаторы, которые позволяют обработчикам событий извлекать нуж- 
ные блоки. Далее в блоки необходимо поместить обработчик событий оп- 
тоџѕеоуег; это позволит компоненту обновлять выбор, переводя его на пози- 
цию, над которой в настоящее время находится указатель мыши. Кроме того, 
с каждым предлагаемым вариантом необходимо соотнести обработчик собы- 
тий опсИск, чтобы после щелчка на строке предположения значение этой 
строки помещалось в текстовое поле. Реализация описанных обработчиков 
событий показана в листинге 10.38. 


Листинг 10.38, Взаимодействие мыши с позицией списка 

поцѕзеоуегНапа1ег: Ғопсіёіоп (е) { 
уар згс = е.ѕгсЕІепепі ? е.ѕгсЕІепепё : .Сагаее; 
уаг іпаех = рахзе1 те (ѕгс. іа. ѕзирѕігіпа (ѕгс.іа.1ІаѕёеІпаехо# ('_')+1)); 
ЕҺ15ѕ.орааёсеѕе1есііоп (іпаех) ; 














ісетс1іскНапа1ег: Ёоцпсііоп (е) { 
ЕЋ1ѕ.поцѕеоуегНапа1ег (е) ; 
ећ1іѕ.һідебиддеѕііопѕ () ; 
6615$ .сехЕ1прие. Ёосиѕ (); 


= ө 





Обработчик тоиѕеоуегНапа!ег () просто находит цель события и вычле- 
няет сгенерированный нами идентификатор, представляющий номер пред- 
лагаемого варианта. Затем можно использовать метод ирӣаѓеЅе1есііоп(}, 
написанный на четвертый день, обновляя выбор и переводя его на позицию, 
над которой в текущее время находится указатель мыши. 

Подобным образом обработчик ИетСИсКНап ег() также должен об- 
новить выбор, поэтому он просто вызывает отвечающий за это обработ- 
чик тоиѕеоуегНапаї1ег(). Затем ИетСИсКкНап[ег() должен скрыть всплы- 
вающее окно с предлагаемыми вариантами, вызывая метод һійеЅирвеѕ- 
110п5 () и возвращая текстовое поле в фокус, чтобы пользователь мог про- 
должать набор. 

Наконец, мы завершили создание всплывающего окна. Сосредоточимся 
теперь на невероятно простой задаче его показа и сокрытия. 


Отображение и сокрытие всплывающего окна 


Создав код, обрабатывающий все сложные детали создания всплывающего 
списка с предлагаемыми вариантами, необходимо создать и код, отобража- 
ющий и скрывающий этот список. К счастью, это довольно прямолинейный 
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процесс, знакомый любому эпизодическому разработчику ОНТМІ -страниц. 
Отображение и сокрытие элемента обычно выполняются посредством мани- 
пуляций со свойством ЯіѕрІау стиля элемента. Наш компонент — не исклю- 
чение. Поэтому изучите листинг 10.39, содержащий код с реализацией отоб- 
ражения и сокрытия всплывающего списка. 


Листинг 10.39, Отображение и сокрытие всплывающего списка вариантов 
зроибиааезЕ1от$: Ёцпсёіоп() { 
уаг дӢіубіу1е = Еһ1іѕ.ѕиддеѕёіопѕріу.ѕіу1е; 
1Е ( аіуѕіу1е.аӣіѕр1Іау == " ) 
тебатги; 
ЕЋ1іѕ.роѕіііопбиддеѕііопѕріу (); 
// Разместить всплывающий список 
аіуѕёу1е.аіѕр1ау = "; 
// Показать всплывающий список 
>. 
// Скрыть всплывающий список 
Һ1іаебисдсдеѕёіопѕ: Ёопсііоп () { 
Ећіѕ.ѕидсдеѕііопѕріу.ѕіу1е.даіѕр1ау = 
"поте" 








В приведенном коде мы манипулируем свойством $(у1е.415р!ау метода 
ѕиввеѕіопѕ Юіу, чтобы отобразить (посредством значения, равного пустой 
строке) и скрыть (посредством попе) всплывающее окно. Метод ѕћоу509реѕ- 
{101$ () выполняет дополнительную работу по размещению окна в нужном 
месте перед его отображением. Вот и все! Действительно все! Компонент го- 
тов. Подведем итоги. 


10.5.6. Итоги 


Да, это был достаточно сложный компонент с большим числом элементов. 
Мы создали компонент с возможностью повторного использования, которым 
можно гордиться. Разработанный компонент Тех{$и5е5( обрабатывает боль- 
шое число конфигурационных параметров; допускает расширение; не нагру- 
жает сервер; к тому же он ненавязчив, работает во всех браузерах, имеет 
простой АРТ... Другими словами, он удовлетворяет всем требованиям, пере- 
численным в табл. 10.2. Полностью исходный код компонента можно най- 
ти на сайте ЮИр://\у\у\м.тапише.сот/сгапе (ВИр://\м\у\. Ч1аекиКа.сот/); 
библиотеку Кісо — на һіїр://орепгісо.оге/, а библиотеку Ргоїоїуре — на 
сайте Вр: //ргоѓоїуре.сопіо.пеї/. 


10.6. Резюме 


Предложение вариантов вводимого текста позволяет пользователям эконо- 
мить время, предлагая им на выбор ту информацию, которая, возможно, 
им требуется. Иногда пользователь, набравший всего несколько букв, сразу 
получает нужные данные. В данной главе были рассмотрены недостатки су- 
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ществующих реализаций и разработано приложение, позволяющее обойтись 
без ненужных обращений к серверу благодаря интенсивной обработке на сто- 
роне клиента. При создании динамического пользовательского интерфейса 
допускающего взаимодействие с клавиатурой и мышью, мы использовании 
ОНТМЕ. В данном примере показано, как с помощью Ајах обеспечить глад- 
кое взаимодействие с сервером без нарушения взаимодействия пользовате- 
ля с У-страницей. Кроме того, предложенный сценарий хорошо работает 
с браузерами, не поддерживающими Ајах, поскольку в подобных случаях 
текстовое окно опережающего ввода действует как обычное текстовое ок- 
но, в котором пользователи могут вводить данные (просто они не получают 
готовые предположения по поводу вводимого текста). Наконец, мы убрали 
объектно-ориентированную оболочку ЈауаЅсгірі, реструктуризировав сцена- 
рий в удобный конфигурируемый и полезный компонент Тех{$и5е5%. 











Улучшенный -портал јат: 


В этой главе. 


• Создание портала Ајах 

• Реализация каркаса регистрации 
• Создание динамических окон 

• Запоминание состояния окна 

• Адаптация кода библиотеки 
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В настоящее время вес больше и больше компаний создают внутренние 
сети на основе порталов. Порталы предлагают пользователю удобный шлюз 
для получения больших объемов информации на одной странице Благодаря 
этому пользователю не требуется заходить на множество Мер-сайтов, что- 
бы получить требуемую информацию. Интерактивные порталы, подобные 
Үаһоо!, позволяют получать новости, прогнозы погоды, результаты спортив- 
ных соревнований, почту, игры и многое другое на одной странице. Дру- 
гим примером портала является принадлежащий Ата7топ поисковый портал 
А9.сот, позволяющий выполнять поиск во многих областях без переходов 
на отдельные страницы С его помощью на одной странице можно искать 
УеЬ-страницы, книги, изображения и многое другое. В А9. сот для отобра- 
жения информации на экране используется Ајах. Это производит неверо- 
ятно благоприятное впечатление, поскольку пользователю не требуется си- 
деть и ждать повторной визуализации страницы, когда будут отображены 
новые результаты поиска. 


В данной главе мы вводим инфраструктуру Ајах в портал, улучшая 
процесс входа пользователя в систему и запоминание системой пользовате- 
лей. Проект "Портал" позволит пользователю настраивать структуру порта- 
ла с минимальными усилия.ми. Пользователь даже не поймет, что его дей- 
ствия вызывают отправку информации на сервер, где будет запоминаться 
точное положение объектов на странице. Это означает, что его личные на- 
стройки будут одинаковыми при каждом входе в систему. При создании пор- 
тала мы вначале примем низкоуровневый поход и реализуем основной каркас 
портала менее структурированным образом, чтобы прояснить саму концеп- 
цию портала. Затем более подробно рассмотрим портал, используя объектно- 
ориентированный подход. Итак, прежде чем мы приступим к реализации пор- 
тала, рассмотрим несколько существующих порталов и подумаем, как с по- 
мощью Ајах сделать их удобнее. 


17.1. Эволюционирующий портал 


Порталы развились из простых сайтов, позволяющих получать электронную 
почту и выполнять поиск, которые эволюционировали до изысканных кон- 
струкций, позволяющих быстро получать большой объем информации при 
минимальных усилиях. Для сравнения: прежде приходилось посещать один 
сайт для чтения новостей, другой — для получения прогноза погоды, на тре- 
тьем располагались комиксы, четвертый специализировался на поиске и т.д. 
В подобных случаях приходилось либо использовать тонны закладок для сай- 
тов, которые мы посещали ежедневно, либо запоминать, какие адреса нужно 
вводить в окно браузера. 


11.1.1. Классический портал 


Все мы уже привыкли к классическим порталам (мы используем их много 
лет). Во многих внутренних сетях компаний они применяются для повышения 
производительности, поскольку все находится в одном месте. Классический 
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Рис. 11.1. Портал Үаһоо! отображает заказную информацию 


портал позволяет пользователю входить в систему и настраивать содержимое 
по своему усмотрению. Например, портал компании может содержать один 
набор настроек для агента по продажам, а другой — для программиста. Обо- 
им сотрудникам может пригодиться окно с календарем проектов компании, 
но не обоим требуются графики продаж или сообщения об ошибках приложе- 
ния. Ограничивая информацию, предоставляемую сотрудникам, мы повыша- 
ем и безопасность, и производительность, поскольку им не приходится искать 
нужную информацию по всей внутренней сети компании. 

Еще одним классическим порталом является Үаһоо!. Заходя на Үаһоо!, мы 
можем получать почту, менять настройки прогноза погоды, чтобы они соот- 
ветствовали нашему региону, изменять внешний вид страницы и др. Как вид- 
но на рис. 11.1, портал Үаһоо! можно настроить под требования пользователя. 

Для этого в Үаһоо! реализован механизм технических страниц, на кото- 
рых пользователь может менять необходимые данные. На одной из таких 
страниц можно выбрать родной город, чтобы отображаемый прогноз пого- 
ды касался только этой местности. На рис. 11.1, например, задан Мэриленд 
(США). Хотя возможность подобной настройки хороша уже сама по себе, хо- 
рошее впечатление пользователя можно усилить, применив Ајах так же. как 
сделала компания Атахоп при создании портала А9.сот. 





А9 


— 


Мейо, шат чо ча» оде бъъёигея. 





Мз 35044 Уча Зла 


набе Соте Скот 

Я ме С 8005 Г зов: Г убоя 

Г реќегепсь Г моме Г мкреба г [моге Сһосез Я 
чоъ Воз Шаля) (Ьа) ломе 1 - 10 01 абод 198 
018 уси пин: Егіс Рахов 
с’ 
Егіс РозсогеНо Мосегасог ог нтм./Лачабсгірт 2х ми Заузраосв.сот Атос оё Заз сре уои Увы 
Віџереим (ог Оуљатіс Уеб Рэдеѕ ... 


Мр баст учись солуразсагећю - 34 С кред ОМО 


с’; ме оа - 
Есіс. Фазсасейо НТЛ ача$ сир тодегакос ах Јачараесћ. сое. Тсасквасі (0) Сосламеи [3] Фоме Бу 
раѕсегейо об Мау 19, 2004 11:09:50 АМ ЕОТ. Регтайи ... 
Бер: /Аааю зама. сопуразсатеЕс/7 004/25 Мп - 26 Сасһај ӘЖ 


Вю в а інт оѓ ће Кпоуедое Базе епілет (һа Егіс разсогецо Баз соплей (0:. Но (0 рғемеги изег тоса 
мем ће сошсе собе оопа беса... 
пар: /Ииме. 9015. сопукпоміосдо База/согииетуйивех ртйуо115 - 36 Сасће СИЮ 


Р 


Рис. 11.2. Портал АЭ.сот с результатами поиска в\Мер информации об Эрике Паскарелло 


11.1.2. Портал сбогатым пользовательским интерфейсом 


Портал Ајах предлагает богатый пользовательский интерфейс, более дина- 
мичный, чем у классического портала, и более удобный для пользователя. Мы 
можем добавлять новое содержимое и без лишних сложностей менять способ 
его представления. Прекрасным примером этого легкого взаимодействия яв- 
ляется поисковый портал Ата7топ А9.сот. Посмотрим, как он работает. На 
рис. 11.2 показан поиск информации об Эрике Паскарелло с единственным 
установленным флажком \У6Б. 

Теперь сузим результаты поиска. Нам требуется книга, написанная дан- 
ным человеком, поэтому мы устанавливаем флажок Воокѕ. В правой сто- 
роне страницы появляется панель Воок Кези $. Как показано на рис 11.3, 
на экран выводятся результаты поиска книг Эрика Паскарелло без повторной 
обработки всей страницы на сервере. 

Другой пример использования Ајах для повышения удобства портала 
связан с настройкой конфигурации портала. Ајах позволяет задействовать 
пользовательский интерфейс как инструмент управления конфигурацией — 
вместо того чтобы для настройки параметров переходить на другую МеБ- 
страницу, пользователь щелкает на объектах, находящихся в отображенном 
окне. Пользователь может динамически менять размеры и располагать эле- 
менты на экране, настраивая портал согласно своим предпочтениям. 

Итак, ознакомившись с несколькими преимуществами портала Ајах, мы 
можем переходить к архитектуре портала, который планируем создать. 
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Рис. 11.3. Портал А9.сот с результатами поиска и колонкой Воок Веѕи1їѕ 


11.2. Создание портала с использованием Јака 


Чтобы создать в высокой степени настраиваемый портал Адах для большого 
числа пользователей, необходим код клиентской части сценария, код сервер- 
ной части сценария и база данных. Сторона клиента обрабатывает взаимодей- 
ствие пользователей с окнами — перетаскивание, отправку данных на сервер 
с помощью Ајах, Сервер, в свою очередь, обрабатывает сеансы пользовате- 
лей, передачу данных клиенту и взаимодействие с базой данных. Базаданных 
в одной таблице содержит имена и пароли наших пользователей, а во вто- 
рой — метаданные окна портала (положение, размер и содержимое). Выпол- 
нение данного проекта будет состоять из большого числа этапов, поскольку 
он является очень динамическим. Чтобы начать данный проект, рассмотрим 
его структуру (рис. 11.4). 

Сама идея создания портала с богатым пользовательским интерфейсом 
для взаимодействия с сервером, использующим Адах, кажется очень слож- 
ной, но вы не поверите, насколько просто можно реализовать данный проект. 
Архитектура портала, показанная на рис. 11.4, состоит из двух основных ча- 
стей: исходной регистрации и динамического взаимодействия с окнами. Та- 
ким образом, процессы можно разбить на две основные группы и использо- 
вать функциональные возможности Ајах для удовлетворения требованиям 
обеих групп. Первый этап заключается в проверке регистрационных данных 
пользователя согласно информации, содержащейся в базе данных, второй — 
это взаимодействие с элементами ОНТМІ. и возврат значений клиенту. 

В данной главе для обработки большого количества клиентского кода мы 
используем библиотеку ОНТМГ. Она позволяет разрабатывать настраивае- 
мые окна, использующие элементы ІЕтате для отображения содержимого. 





Рис. 11.4- Схема действии портала Ајах Пользователи входят 
на портал и управляют своими окнами. Изменения записываются 
автоматически в фоновом режиме 


рис. 115. Свойства таблицы 
иѕегѕ в 501 Заиите! — 
графической программе работы 
с базами данных 








Рис. 11.6. Содержимое таблицы изег$ 


11.3.1. Таблица пользователя 


Первой таблицей, с которой мы сталкиваемся в базе данных, является табли- 
ца изег$, содержащая три столбца В данном проекте мы будем использовать 
только необходимый минимум информации, но в зависимости от наших тре- 
бований ее объем может увеличиваться. Три столбца таблицы, ій, иѕегпате 
и раѕѕуога, создаются с помощью стандартного ЗОГ-выражения, приведен- 
ного в листинге 11.1. На рис. 11.5 показана таблица в клиентском приложении 
базы данных ЗОГ Запите! (һр: / /ѕдоігге1-591.ѕ0игсеѓЁогве.пеї). 


Листинг 11.1. Схема таблицы изег$ 


сгеабе саб1е иѕегѕ ( 
іа іп ргітмагу Кеу орлаае поё пи11, 
изегпаме уагсһаг (50) поё по11, 
раѕѕиога уагсһаг (50) поё по11 


> ОНИ 


После создания таблицы необходимо создать несколько пользователей. 
В данном случае мы жестко кодируем имена пользователей и пароли. Как 
видно на рис. 11.6, в таблицу добавлены два пользователя с идентификаци- 
онными номерами 1 и 2. Эти номера потребуются нам позже. 

Далее необходимо создать учетные записи для пользователей, представ- 
ленных в таблице. В нынешнем состоянии портал не представляет админи- 
стративный пользовательский интерфейс, облегчающий добавление новых 
пользователей, поэтому мы должны сделать это вручную — с помощью удоб- 
ного инструмента базы данных. Разработка интерфейса управления пользо- 
вателями на основе Ајах возможна, но для экономии места мы не будем ее 
рассматривать в данной книге. 


446 Часть ТУ. АЈах в примерах 


Последнее, что от нас требуется, — сопоставить с таблицей права досту- 
па. В учетных записях пользователей, которые будут обращаться к таблице 
должны предоставляться права на чтение и запись. Не задав права доступа, 
мы получим ошибки при обработке запросов 801. 

Итак, у нас есть таблица иѕегѕ, и теперь можно писать код процесса 
регистрации, начиная с его серверной части. 


11.3.2. Серверная часть кода регистрации: Лауа 


Код серверной части сценария портала Ајах по своей сути прост, но его раз- 
работка потребует множества шагов, поскольку нужно реализовать довольно 
много функциональных возможностей. Сейчас мы сконцентрируем внимание 
на вопросах, касающихся регистрации. 

Напомним процесс. Когда пользователь входит на портал, код клиент- 
ской части сценария отправляет запрос серверу, передавая в нем информа- 
цию о пользователе. Серверный процесс, перехватывающий данный запрос, 
определяет, верна ли предоставленная информация. Если да, то запускается 
процесс создания окон портала. Если предоставленная пользователем инфор- 
мация неверна, на клиентскую страницу возвращается сообщение об ошибке. 

Поскольку мы работаем на Лауа, то для обеспечения безопасности всех 
взаимодействий с сервером будем использовать сервлетный фильтр. Если вы 
не знакомы с этим термином, поясним: фильтр — это логика, которую можно 
связать с одним или несколькими ресурсами и которая может модифициро- 
вать запрос до его передачи целевому сервлету. Использование фильтров для 
обеспечения безопасности обсуждалось в главе 7. Если вы используете систе- 
му, не поддерживающую фильтры, то можете создать вспомогательный объ- 
ект или функцию, проверяющую, зарегистрировался ли пользователь, и вы- 
зывать эту функцию вручную в начале каждой страницы, которую требуется 
защитить. Код фильтра регистрации приведен в листинге 11.2. 


>, листинг 11.2. Год тЕ! ег. ј ауа: код серверной части процесса регистрации 
риорііс с1аз$ ІодіпЕіібег 1тр1етепе$ Е116ех { 
риор1іс уоіа іпіі#ҒЕі1ёегСоп#ісд соп#ід) 
СРгомз Ѕегу1еіЕхсерііоп { } 
рир1іс уоіа аоЕі1ќбех ( 
бегуІеїКесиџеѕё геацеѕі, 
бегу1еёКеѕропѕе геѕропѕе, 
Рі1бегСҺаіп ЁҒі1ёегСҺаіп) 
СЮгомз 10Ехсерііоп, бегу1еёЕхсерёіоп { 
роо1Іеап ассерё=ЁҒа1ѕе; 
Нісрбеѕѕіоп ѕеѕѕіоп= ( 
(Нісрбегу1еіВеацеѕі) геаиеѕі) .деёдЅеѕѕіоп () ; 
Оѕег иѕег= (Оѕег) 
(ѕзеѕѕіоп.сдеёсАікірибе ("иѕег")); 
// О Проверить сеанс для объекта Оѕег 
1Е (џѕег==пи11) { 
ассері=10одіп (гкедиеѕі); 
// © Запросить аутентификацию 
}е1ѕе{ 
ассері=ігие; 
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// © Разрешить вход 
} 
1Е (ассері) { 
Ғі1бсегСһаіп.аоғі1іёег 
(геаџеѕі, гезропзе); 





// О Отправить запрос дальше 
}е1зе ( 
Му1сехг игібег=геѕропѕе.сдеіийгіёег () ; 
мгісег .мгісе 
(750611 .оӯдебіодіпЕггог()) ; 
// © Вернуть код ошибки 
игібег, Ё1иѕһ() ; 
мхіёег.с1оѕеё); 








} 
рг1уабе роо1еап 10одіп (Ѕегу1еіВеацџеѕі гесиеѕі) { 
// 0 Получить из запроса информацию о пользователе 
ЭЕу1па изег=кеааезе.деЕсРакапесег ("изегпапе"); 
бЕгіпд раѕѕиога=гедиеѕі . сеіРагапебег ("раззмога"); 
Оѕег иѕегорј = #іпа0ѕег (оиѕег,раѕѕиога) ; 
1Е (иоѕегорј!=пи11) { 
НіёрЅеѕѕіоп ѕеѕѕіоп= 
( (Несрбегу1еїВКесиеѕё) гедиеѕі) .деібеѕѕіоп (ігие) ; 
// О Записать сеанс для будущего использования 
зез51оп .зебдЕсу1Басе ( "азег" ‚ азекОЬ)); 

















} 
хебогп (изекОЪ]!=по11); 
} 
ргіуаёсе Оѕег Е1па0зек (ЅЕгіпо азехг, Ѕёгіпо раззмога) { 
Оѕегр иѕегорј=пи11; 
Соппесііоп сопп=рвуоё1і1 . десСоппесіёіоп (); 
// © Сформировать выражение 501 
Сту { 
бігіпо ѕа1="ЅЕГЕСТ 1а ЕВОМ азегз МНЕВЕ иѕегпапе=' " 
+иѕег+"' АМР раѕѕиога“' "+раззмохга+" '"; 
ЭЗсасемейе ѕімі=сопп.сгеаёеѕіаёепепё () ; 
Кеѕои1ёдеі гѕе=ѕеті . ехесиёеоиоегу (ѕа1); 
1Е (хз.пехё()){ 
// © Создать объект Озек 
106 1Я=х$ .дее1ю® ("іа"); 
изехгОр)=пем Оѕег (іа, иѕег); 

















} 
Ісаєсһ (501Ехсерііоп ѕа1ех) { 
} 


геогр иѕегорј; 





} 
рир1іс уоіа аезЕекоуо { 9 


> М 





В данном случае мы применяем фильтр, проверяющий, присутствует л* 
уже в сеансе объект Чзег О. Если да, то мы его принимаем ©; в противного 
случае производится аутентификация с использованием имени пользовател* 


и пароля, указанных в запросе ©. Если запрос принят, он передается сервле- 
ту О; в противном случае возвращается указание отобразить сообщение об 
ошибке ©. Весь сгенерированный код ЈауаЅсгірі заключается в интерфейсный 
объект Ј5 0711. Ниже показан метод, генерирующий сообщение об ошибке. 
робіс зас Эишея зе оэетЕ8ггог() 
эншеВиНег ]зВиЁЕ=пем ЭишеВийег() 
.аррепа("Яоситепі.веіЕІетепіВуІаѓ '‘ѕрапРгосеѕѕіпе')(ВВ$5)п") 
.аррепа(" іппегНТМІ, = ") 
.аррепа("'Тһе Оѕегпате апа Раѕѕуога аге шуаПа’;(ВВ$$)п"); 
геогп ЈјѕВиЁ.іо$ёгіпо#); 


За аутентификацию отвечает метод Іоғіп (), приведенный в листин- 
ге 11.2. Мы извлекаем из запроса имя пользователя и пароль ®, а затем 
вызываем функцию Ип4изетР), обращающуюся к базе данных и извлека- 
ющую соответствующую строку О. (Мы абстрагируемся от всех вопросов, 
связанных с базой данных; нас интересует только объект ОВОЧІ.) Если стро- 
ка, соответствующая данным пользователя, найдена, функция возвращает 
объект Оѕег ©, который затем записывается в сеансе О и используется при 
следующих прохождениях через данный фильтр, — далее нам уже не понадо- 
бится предоставлять в строке запроса имя пользователя и пароль, поскольку 
объект Оѕег уже будет присутствовать в сеансе. 

Описанный подход обладает еще одной приятной особенностью — он об- 
легчает выход пользователя из системы. Все, что нам нужно, — удалить объ- 
ект Озег из сеанса. 

Как показано в листинге 11.3, сам по себе объект Оѕег представляет 
структуру базы данных. 


№ Листинг” 13. Шѕег.јама 
рир1іс с1аѕѕ Озек { 
ргтуабе іпі іа=-1; 
ргіуаіе 5Ег1па иѕегМате-пи11; 
рор1іс Оѕег(іпі іа, Ѕігіпо џѕекМате) { 


ѕиреү (); 
єһіѕ.іа = іа; 
сһіѕ.иѕегМапе = иѕегМате; 


} 
рчр1іс іпё чеё1а() { кебоато 1а;} 
рчрііс бЕг1па аееОзехМащеЕ) { тебагп оѕегМате; } 


Ј Ең 

В данном объекте мы не будем записывать поле пароля. При работе с пор- 
талом он нам не понадобится, кроме того, его использование в сеансе пред- 
ставляет угрозу безопасности! Поэтому работу над процессом регистрации 
на стороне сервера можно считать законченной. Ничего необычного. Теперь 
пойдем дальше и посмотрим, как с этим кодом будет реагировать клиентская 
часть приложения. 
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11.3.3. Структура регистрации (клиентская часть) 


Клиентская часть кода регистрации состоит из двух частей. Первая — ви- 
зуальная, которую пользователь может видеть и с которой может взаи- 
модействовать. Данный НТМГ-код мы создадим динамически; вы удиви- 
тесь, насколько просто создать структуру с помощью элементов Яіу, зрап 
и правил С$8. 

Вторая часть сценария — код Ајах или ЈауаЅсгірі, отправляющий запрос 
на сервер и обрабатывающий данные. В данном случае мы собираемся ввести 
метод ЈауаЅсгірі еуаі (). Этот метод обрабатывает переданную ему строку 
как код ЈауаЅсгірі. Если строка содержит имя переменной, метод создает пе- 
ременную. Если в качестве входного параметра еуа!| () получает вызов функ- 
ции, метод выполняет эту функцию. Метод еуа!() — довольно мощный, но 
его производительность может быть невысокой из-за сложности задейство- 
ванных операций. 


Структура НТМЕ 


Как и в предыдущих главах, для формирования структуры страницы мы не 
будем использовать таблицу. Использование таблиц для создания структуры 
увеличивает время визуализации страницы, а поскольку мы используем Ајах, 
то хотелось бы, чтобы все элементы нашего сценария работали и реагировали 
как можно быстрее. Нам необходимо поместить текстовое окно, поле пароля 
и кнопку отправки в форме, которую мы можем отправить на сервер. Кроме 
того, нам потребуется элемент 5рап, чтобы мы могли отобразить поступившее 
с сервера сообщение об ошибке, если имя пользователя или пароль окажется 
недействительным. Помещая всю форму в элементы іу и ѕрап, мы фор- 
матируем НТМГ-код, получая заголовок портала. В листинге 11.4 показана 
структура НТМТ-кода заголовка регистрации. 


Листинг 11.4. НТМЕ-структура регистрации 1ЫЯ 
<!— О Определить форму —> 
<Ғогт пате=" Еогті"> 


<1-— О Добавить заголовок —> 
<а1у іа="Һеайег"> 
<!-— © Ввести элемент ѕрап для регистрации —> 
<зрай іа="1одіп"> 
Маше: 
<!-— О Добавить текстовое поле для имени пользователя —> 
<1праЕ ёуре="ёехё" папе= "иѕегпапе"> 
<!-— © Добавить элемент для пароля —> 
<рг>Раѕѕиога: 
<іприё їуре="раѕѕиока" паше="раззмога" > 
<Би/> 
<!-— О Ввести обрабатывающий элемент ѕрап —> 


<зрап іа= "ѕзрапРгосеѕѕіпо"х/ѕрап> 
<іприё буре="раббоп" паме= "ріпѕЅир" уа1ае-"1оа1п" 
<1— © Добавить кнопку "Отправить" -—> 
опс1іск= "1одіпКеаоеѕі () "> 
</зрап> 





Рис. 11.7. Регистрационная форма НТМЕ 
без правил С$5 





<1— © Добавить текст —> 
<зрап 1Аа="$1одапТех(">А]ах Рогёа|</зрап> 
</аіу> 
<!— © Добавить контекст по умолчанию —> 


<аіу іа="аеѓаџіСопіепї" > 
<р>Ѕботе їехї воез Һһеге!</р> 
</аіу> 
<аіу 1а="д1убе 118$" с1аѕѕ =" һіааеп"Х/аіу> 
</#огт> 


Вначале мы добавляем форму О к НТМГ-документу. Эта форма обеспе- 
чивает семантически значимый контейнер для текстовых окон. Кроме того, 
она предоставляет путь для отступления — аутентификации без использова- 
ния Ајах, т.е. посредством обычной отправки формы. Мы создаем заголовок 
Чу ©, вмещающий в себя весь наш код. Затем добавляем элемент зрап ©, 
содержащий текстовое поле имени пользователя О или поле пароля 0, обра- 
батывающий элемент ѕрап 0 и кнопку отправки ©. 

С кнопкой, используемой для отправки данных на сервер, должен соотно- 
ситься обработчик событий опс1іск. Этот обработчик инициализирует Ајах, 
вызывая функцию ЈауаЅсгірі ГовіпКедиеѕії) (объясняется ниже, в разделе 
"Код регистрации (ЈауаЅсгір?)"). 

Чтобы завершить работу с заголовком, осталось добавить текст © портала 
и место для содержимого по умолчанию ©, которое будет отображаться при 
загрузке страницы. В элементе іу с именем ӣеѓацшїСопѓепі можно отобра- 
зить любое сообщение. В данном примере мы просто помещаем в него строку 
текста, но вообще можно добавлять ссылки, изображения, текст и все, что 
нам будет угодно. Далее мы записываем НТМТ-форму; ее непрезентабельный 
внешний вид без применения к элементам правил С$5 показан на рис. 11.7. 

Чтобы украсить эту "пресную" структуру, с элементами нужно соотнести 
правила С$5. Поскольку мы присвоили элементам собственные идентифика- 
торы, это упрощает процесс. Чтобы обратиться к идентификатору элемента, 
поместим перед ним знак #* Таблицу стилей можно добавить как внешний 
или встроенный файл, используя дескриптор <ѕїуІе>. В данном случае ис- 
пользуется встроенный дескриптор <ѕїіуІе>, добавляемый в заголовок доку- 
мента. Как показано в листинге 11.5, мы добавляем правила С$5$, меняющие 
цвета, шрифты, размеры, положения, поля и т.д. 


Глава 11. Улучшенный Меб-портал Ајах 451 


Листинг 11.5. Правила С$$ регистрационной формы 
<ѕіуІе туре="{ех/с$$"> 
<1— О Элементы һіті и Бойу —> 
һёті, Боӣу{ таг: Орх; рада1т$:Орх; 
һеівһ:100%; } 
<1— © Определить стиль элемента заголовка --> 
#һеааег{і БасК=гоипа-со[ог: #С0С0С0; 
Ве!1>01: ЮОрх; 
Богаег-Бо (ош: Ірх зоШа Ыаск; 
Ғопі-уеіеһі: Бо1а; 1 
<1— © Разместить элемент зрап регистрационной формы — > 
#10211{ {ех(-а1151: гівһі; оа: гівһі; 
тагвіп-іор:15рх; 
тагеіп-гіѕһї:15рх; ) 
<1-- О Отформатировать текст заголовка --> 
#51овапТехї! Ғопї-ѕілхе: 25рх; 
тагвіп-1Іеғ#ё: 15рх; 
Піпе-һеірһі: ЮОрх; } 
</51уІе> 


Вначале мы удаляем все поля или заполнения из тела О документа. Вы- 
соту (свойство һеіеһі) мы задаем равной 100%. Важно отметить, что нам 
необходимо задать данные свойства в дескрипторах НТМЕ И бойу, поскольку 
различные браузеры получают данную информацию из одного из указанных 
дескрипторов. 

Разрабатывая стилевое оформление заголовка ©, мы можем задать цвет 
фона элемента у. Кроме того, можно установить высоту и добавить границу 
кнопки, чтобы отделить заголовок от содержимого. Помимо этого, можно 
изменить свойства шрифтов, которые мы посчитаем нужными. 

Мы принимаем регистрационную информацию © и перемещаем ее в пра- 
вую сторону экрана. Для этого используется свойство Ноа со значением 
г120{. Для выравнивания текстовых блоков применяется свойство {ех{- 
аП2п, поэтому содержимое элемента ѕрап также выравнивается по право- 
му полю. Благодаря этому текстовые окна выглядят более унифицирова- 
но. В противном случае они не были бы выровнены правильно, поскольку 
имя строки короче, чем пароль. Кроме того, для выравнивания положения 
регистрационной информации можно добавить поля, чтобы правый край 
соответствующего окна не примыкал непосредственно к границе элемента 
аіу заголовка. 

В заключение необходимо определить стиль текста заголовка О. Зада- 
вая высоту строки (свойство Піпеһеівһі) равной высоте элемента іу, мы 
позволяем центрировать текст заголовка вертикально. Кроме того, свойства 
шрифта задаются так, чтобы текст был заметен. Далее мы добавили поле, 
поэтому первая буква в слове Ајах не выровнена по краю заголовка. После 
применения правил С$5 к заголовку можно записать документ и посмотреть, 
как таблицы С5$5 изменили его внешний вид (рис 11.8). 


Рис. 11.8. Страница регистрации 
портала Ајах с разработанной 
таблицей стилей 





На рисунке видно, что текстовые окна выровнены по правому краю, 
а текст заголовка — по левому. Таким образом, мы взяли стандартную НТМТ- 
структуру и создали привлекательную шапку страницы регистрации, не ис- 
пользовав при этом ни одной таблицы. Разработав стилевое оформление заго- 
ловка, можно добавить к форме ряд функциональных возможностей. Напри- 
мер, нам нужны возможности ЈауаЅсгірі, чтобы мы могли передать запрос 
на сервер, не отправляя всю страницу. 


Код регистрации (уауа$ спирт) 


Написав код регистрации ЈауаЅсгірі, мы, используя возможности Ајах, смо- 
жем передавать имя пользователя и пароль на сервер, не отправляя при 
этом всю страницу. Для этого потребуется обратиться к внешнему файлу 
ЈауаЅсгірі пеї.јѕ, содержащему объект Сопѓепіоайег, чтобы мы могли за- 
действовать Ајах для отправки и извлечения запроса. 


<ѕсгірі #уре="іехі/јауаѕсгірі" ѕгс="пеї.јѕ"х/ѕсгірі> 

Файл СопѓепіГ.оайег выполняет все действия, связанные с отправкой ин-3 
формации на сервер, сокрытием кода, зависящего от конкретного браузера, 
за удобным интерфейсным объектом, введенным в главе 3. Итак, обратив- ' 
шись к файлу пеѓ.јѕ, мы можем выполнить запрос. Этот запрос иницииру- 
ется щелчком на кнопке в нашей форме регистрации. Сама форма при этом 
должна выполнить три действия: во-первых, сообщить пользователю, что его 
запрос обрабатывается; во-вторых, собрать информацию и, в-третьих, отпра- 
вить запрос на сервер (листинг 11.6). 


Листинг 11.6. Запрос регистрации ХМЕНИрВевие${ 
Ғопсііоп ІосдіпВедиеѕё () { 
аосотепё . чесЕ1етепрЕВуТа (" ѕзрапРгосеѕѕіпа") .1лппехНТМЬ = 
" Уег1Еу1па Сгедепёіа1ѕ"; 
уаг игі = 'рогіа11оӯдіп.ѕегу1еі'; 
уаг ѕегМапе = Чосимепе.РГоги1.азегпаме .уа1ае; 
уаг ѕігРаѕѕ = аоситмепе.Роги1 .раззмога.уа1ае; 
таг. віграғамв: = "ибеке"+8семане т "ұрава=" + вытрава 
уаг Іоайегі = пем пе .СопбепіІоааег ( 
ог1,Сгеаёебсгірё, по11,"РОЗТ" ‚ зегРакапз); 

















Рис. 11.9. Сообщение об ошибке, вызванное предоставлением неверных сведений 


Прежде чем отправлять информацию на сервер, необходимо отобразить 
для пользователя сообщение о том, что щелчок на кнопке позволяет ему 
войти в систему. Благодаря этому пользователь не будет повторно щелкать 
на кнопке, думая, что ничего не происходит. 

Итак, мы получаем поля имени пользователя и пароля и помещаем их 
в строку, отправляемую на сервер. Значения отправляются на сервер с по- 
мощью объекта Сошеп оааег, принимающего в качестве параметров ОКІ, 
функцию, вызываемую при удачном завершении действия, функцию, вызы- 
ваемую в случае ошибки, действие формы РОЅТ, а также строку, содержа- 
щую отправляемые параметры. Рассмотрим подробнее функцию, вызывае- 
мую при успешном возврате данных с сервера и обрабатывающую эти дан- 
ные: СгеаїеЅсгірі{). 


Рапсйоп СгеаѓеЅсгірі() { 
ѕітТехі - 1һіѕ.гед.теѕропѕеТехі; еуа1(51гТехї); 
} 


При создании серверной части сценария мы возвращали текстовые стро- 
ки, содержащие выражения Јауа$Ѕсгірі в свойстве геѕропѕеТехі возвраща- 
емого объекта. Чтобы эффективно использовать выражения ЈауаЅсгірі, их 
необходимо обработать с помощью метода еуаі (), точно определяющего, что 
содержит строка, и выполняющего указанные в ней действия. В данном слу- 
чае строка либо будет содержать сообщение об ошибке, сгенерированное при 
сбое ГовіпЕ ег, либо код создания окна, если фильтр пропускает данные 
к ЗеесЕЗегу[ей (листинг 11.8). 

Из чего состоит строка? В данном приложении мы не собираемся воз- 
вращать в ответ на запрос ХМГ-документ, как мы поступали во многих 
других примерах. Вместо этого мы вернем структурированные выражения 
Јауа$сгірі, которые смогут использовать метод еуа1(). Используя термины, 
сформулированные в главе 5, можно сказать, что наше решение ориентиро- 
вано скорее на сценарий, чем на данные. Как и ранее, мы приняли данный 
подход только ради разнообразия. В качестве среды передачи при разработке 
кода портала можно использовать ХМІ. или ЈЅОМ. 

Теперь можно сохранить портал и запустить его, чтобы посмотреть, как 
работает процедура регистрации. Как видно на рис. 11.9, в поля были введены 
неверное имя пользователя и пароль. 

Ниже кнопки "Іоғіп" на рис. 11.9 отображено сообщение об ошибке, ин- 
формирующее пользователя, что предоставленные им данные неверны. 


Если, с другой стороны, регистрация прошла успешно, запрос перена- 
правляется на основную страницу портала. В этом случае следующим шагом 
является создание окон. Чтобы получить намеченный богатый пользователь- 
ский интерфейс, нам придется разработать довольно много кода ОНТМІ, но 
на самом деле эта тяжелая работа уже выполнена, поскольку мы используем 
готовую ОНТМІ-библиотеку ЈауаЅсгірі. 


11.4. Реализация окон ОНТМЕЁ 


Наш портал Ајах имеет богатый пользовательский интерфейс, позволяющий 
пользователю динамически размещать окна. Кроме того, пользователь мо- 
жет устанавливать размер окна (желательную ширину и высоту). При изме- 
нении указанных настроек мы можем с помощью Ајах реализовать взаимо- 
действие с сервером и записать новые значения в собственной базе данных 
(причем пользователь даже не будет знать об этом). Чтобы разрешить подоб- 
ное поведение, требуется разработать таблицу базы данных, в которой будут 
храниться свойства окна — высота, ширина и положение. Код серверной ча- 
сти сценария должен получать данные значения и соответствующим образом 
обновлять величины в базе данных. Написание ОНТМГ-кода, совместимого 
с основными браузерами, может оказаться сложным, поэтому для реализации 
перетаскивания и изменения размеров окна мы используем сценарий библио- 
теки ОНТМГ. Данная библиотека, Ј5\паож. јѕ, представляет собой внешний 
файл ЈауаЅсгірі, содержащий код всех требуемых нам функций . (Эту биб- 
лиотеку можно найти на У№еБ-сайте данной книги.) Чтобы активизировать 
инфраструктуру Ајах, нам потребуется лишь незначительно изменить код 
данной библиотеки. 


11.4.1. База данных окон портала 


Нам нужна таблица базы данных, способная содержать свойства несколь- 
ких окон ОНТМГ для каждого пользователя. Каждый пользователь может 
иметь несколько строк в данной таблице — по одной на каждое окно портала. 
Таблица применяется для извлечения последнего запомненного положения 
и размера окна при первом входе пользователя в систему. Когда пользова- 
тель что-то меняет, значения обновляются, чтобы при следующем посещении 
окна располагаться точно так же. Для создания таблицы рогѓа! міпаомѕ 
используется следующий ЗОГ-код: 
сгеаіе ёар1е рогіа1 иміпаоиѕ ( 

іа іпё ргіюпаку Кеу поі пи11, чѕег іа іпі поі пи11, 

хроѕ іпі по пи11, урРоѕ іпё поі пи11, 

міаєһ іп поё пи11, Белое іпі поё пи11, 

џогі уагсһаг (255) поі по11, іі1е уагсһаг (255) поё пи11 






ЧезсИЬе рома! 





беѕсире ропаі Иная 


\азетсеалсђ ай епш 23 
Чпзетбеагсћ |<пий> 
Пизепбежсй [<> _ 
Ипзепбеасћ _ (елый 


`МАВСНАЕ (255,0) _— 1 


Рис. 11.10. Структура таблицы УАВСНАЯ (55,0) 1 


рог{а| міпаом5 


Каждый пользователь может иметь несколько окон с различными на- 
стройками. Эта проблема решается следующим образом. Столбец изег іа 
связан с базой данных пользователей. Каждое окно должно иметь иденти- 
фикатор и первичный ключ, которые можно использовать для хранения и об- 
новления свойств. Не забудьте добавить к столбцу идентификатора окна ав- 
томатический инкремент. Данный идентифицирующий столбец используется 
кодом Ајах и библиотекой окон ОНТМГ для получения и обновления свойстЕ 
окон, определенных пользователем. 

Для хранения координат х и у нашего окна ОНТМІ. потребуются два 
столбца. Данная информация определяет положение окна на экране отно- 
сительно левого верхнего окна браузера. Данные столбцы, содержащие ко- 
ординаты, обозначаются хРоѕ и уРоѕ. Кроме того, нужны еще два свойстве 
окна ОНТМГ: ширина и высота. Они хранятся в таблице как целочислен- 
ные величины. 

Последние два столбца базы данных определяют ОВГ содержимого окна, 
а также заголовок содержимого, присвоенный пользователем для быстрого 
доступа. Все свойства, фигурирующие в таблице рогіа! \1п4о\з базы дан- 
ных, показаны на рис 11.10. 

Далее требуется ввести определенные значения, заданные по умолчанию, 
и выполнить тестирование. В таблицу иѕегѕ мы можем добавлять любое чис- 
ло пользователей. Как показано на рис. 11.10, для пользователя 1 мы доба- 
вили три окна ОНТМГ. 

На рис. 11.11 показано, как три параметра окна ОНТМГ предоставляю! 
информацию, требуемую для создания трех окон на экране, имеющих различ- 
ные размеры и положения. В данном случае в трех окнах отображаются тр* 
У\еБ-сайта: ЈауаҜапсһ, Соое и Егіс'ѕ Адах В10е. Создав таблицу базы дан- 
ных, мы можем предоставлять указанную информацию пользователю прр 
его входе на портал. Насколько это просто, вы узнаете в следующем разделе 


11.4.2. Серверный код окна портала 


Предположим, что запрос регистрации прошел через фильтр безопасности 
Следующий этап — извлечение списка окон портала для аутентифициро- 
ванного пользователя и возврат ЈауаЅсгірі-кода, сообщающего браузеру, чтс 
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Рис. 11.11. Данные, введенные для пользователя с идентификатором 1 


нужно отображать на экране. В связи с этим мы определяем объект Рогіа1- 
УМпао\, представляющий строку информации в базе данных, как показано 
в листинге 11.7. 


Листинг 11.7. Роца\ММпдо\.дауа 

рчрііс с1аѕѕ РопаМ/шао\ { 
ргіуаіе іпі іа=- 
ргіуаіе Озег иѕер=пи11; 
ргіуаёе іпі хРоѕ=0; 
ргіуаіе іпі уРоѕ=0; 
ргіуаіе іпі міаёһ=0; 
ргіуаёе іпё һеісдһё=0; 
ргіуаёе бЅігіпа ик1=пи11; 
ргіуаіе 5Еглпа ёіё1е=пи11; 





рорііс Рогёа1\іпао% ( 
іп іа. Оѕег иѕег, іпё хРоѕ, 
іп міаёһ,іпё Һеідһё, 


іп уРоѕ, 




















бігіпо ик1, Ѕёгіпа ёіі1е 
){ 

Еһіѕ.іа = іа; 

ЕҺіѕ.цѕег = иѕеү; 

ЕҺіѕ.хРоѕ = хРозѕ; 

Еһіѕ.уРоѕ = УРоз; 

ЕҺіѕ.мтіаєһ = міаёһ; 

ЕҺіѕ.Һеідһћё = Һеідһі; 

Е61$.и:1 = 1:1; 

ЕҺіѕ.біб1е = Е1Е1е; 
} 
рорііс іпё сдеёНеісћё () {хгебаки Һеідһё; } 
рир1Ііс уоіа ѕеёНеідһі (іп Һеїідһё) {+һіѕ.Һеідһё » Һеідһі; } 
рорііс 1пЕ деё1а() ({геёогп іа; } 
риор1Ііс уоіа ѕеё1а(іпі іа) {+һіѕ.іа = іа; } 
риор1Ііс Ѕігіпа деётіё1е() {хгебаго ёіё1е; } 
рирііс уоіа ѕеётіё1е(Ѕёгіпо ёіё1е) {һіѕ.ііё1е = &161е;} 
рор1Ііс Ѕёгіпд деё0г1 () {кебоги огі;} 
риор1Ііс уоіа зее0к1Е$ек1та пг1) {6015.91 = огі;} 
рор1Ііс Оѕег деі0ѕег() {геіџгп иѕеү; } 
рчрііс уоіа ѕеё0ѕег (Оѕег азехг) {ёһіѕ.џѕег = изег;} 
риор1іс іпі деіміаёһ () {хгебого міаёһ; } 
рорііс уоіа зѕебиіаёһ (іп міаєһ) {һіѕ.міаєһ • уіабһ; } 
рир1іс іпі деёХРоѕ() {гебокп хРоѕ; } 





рчрііс уоіа зеЕХРоз (іпі роз) {хРоз = роѕ;Ј 
рир1іс іпі деёҮРоѕ() {геіогп УРоз;} 
рир1іс уоіа ѕеёүроѕ (іп роз) {УРоѕ = роѕ;) 


} 











Как и прежде, объект представляет собой достаточно прямолинейное 





отображение структуры базы данных. 














В реальной задаче мы, возможно, 





использовали бы для облечения жизни ОВМ-систему, например НШетлае 





или ІВАТІЅ, но сейчас нам требуется, 








чтобы все было довольно простым 








и платформенно-независимым. Обратите внимание на то, что мы предостав- 
ляем для этого объекта как методы установки, так и методы получения, по- 
скольку нам нужно, чтобы объекты обновлялись динамически в ответ на 
события на стороне клиента. Запрошенный при регистрации ОВЬ, рогіа1- 
Іодіп, ѕзегуІеі, отображается в сервлет, извлекающий все окна портала для 
этого пользователя и возвращающий в ответ указания Јауабсгірі. Основной 























сервлет показан в листинге 11.8. 





Листинг 11.8. Сервлет Ѕе1есіЅегуІеі 



































. Јауа 


рир1іс с1аѕѕ бе1есібегу1её ехёепаѕ НіірЅегу1её { 


ргоёсесіеа уоіа аороѕі ( 





Несрбегу1е Веааезе геаиеѕі, 
Небрбегу1е(Везропз геѕзропѕ 








) Еһгоиѕ бЅегу1еёЕхсерііоп, ІО! 





Ехсерёіоп { 


Ніірбеѕѕіоп ѕеѕѕіоп=гесдиеѕі .деёдЅеѕѕіоп (); 


Оѕег иѕег= {Оѕег) 
// О Проверить сеанс 


(ѕзеѕѕіоп.дерАіікіриёеЁ"оѕек")); 
ЭсулпаВоЕЕег јѕВиЁ=пеу ЅігіпоВиЁ Ғе (); 


1Е (иѕег==пџи11) { 


3 5ВиЁ.аррепа (750611 .1одооіё ()) ; 


}е1ѕе{ 


Ііѕе м1паомз$=рВ0е11 


// 0 Определить объект 


.аесРогіа1Иіпаоиѕ (иѕег); 


// в Использовать объект 750611 


3 5ВиЁ.аррепа (750611.1піёуІ() ); 
Ғор (Ібегаёсорг 1ібег=иіпаӣоиѕ .іёсегаіог () ; іёег.һаѕМехі ();) 
Рогіа1іпаоу иіпаоу= (Рогіа1Иіпаоих) (16ех.пехё()); 
ѕзеѕѕіоп. ѕзесАёёгірибе ( "м1паом_"+и1п9ом.чее1а() ,мтпаом) 


3 5ВиЁ.аррепа 
// О Объявить окно портала 


(750611 .іпіёИіпаокх (иіпдӢоу) ) ; 


} 
| 


Му1Ссехг игіёег=геѕропѕе.дебийкііег () ; 





// О Записать в выходной поток. 


мгіёег.икііе (7 5ВиЁ.боѕігіпд()); 


мгібсег. Ё1оѕһ(); 
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Здесь мы снова используем объект ОВОЧІ для абстрагирования взаимо- 
действий с базой данных и 50| — для генерации кода ЈауаЅсгірі. ОВОЧІ 
предоставляет метод веїіРогѓаІ\іпаомѕ () ©, принимающий в качестве ар- 
гумента объект Озег. Один из таких объектов фигурировал в информации 
о сеансе, поэтому теперь мы его извлекаем О. Фактический код Јауа$сгірі 
генерируется (как и ранее) объектом 15011. создающим код инициализации 
пользовательского интерфейса ©, объявляющим окна портала, извлеченные 
из базы данных О. и записывающим их непосредственно в выходной поток 
сервлета 0. 


Напомним коротко, что представляют собой вспомогательные объекты 
которые мы постоянно используем, — ОВОШ и Ј5 061. Объект ОВО ис- 
пользуется для получения списка окон портала. Как отмечалось выше, в ре- 
альной задаче этот процесс было бы неплохо автоматизировать, используя 
Негпаже или похожую систему; но с обучающей целью мы используем при- 
веденный в листинге 11.9 метод объекта ОВО, являющийся реализацией 
доступа к таблице рогіа! \ш@4о\з в базе данных. В данном случае применя- 
ется прямолинейный код ЗОГ, но представленный принцип легко перенести 
на любой удобный для вас язык. 


Листинг 11.9. Метод веіРогіаМіпаоуѕ О. - ^Ш 
роибіс ѕіаїіс 1151 реїРогѓаІ\№таоҹѕ (Оѕег изег){ 
[15$ Пѕё=пеу Аггау1151(); 
Е сопп=веїСоппесіоп(); 
у 
Ѕігіпе за="ЗЕГЕСТ * НОМ роца! уіпаоуѕ " 
+-УНЕКЕ оиѕег іа=" +иѕег.веіа(); 
// О Построить выражение 801. 
Ѕіаќетепі ѕ$#ті=сопп.сгеаѓе$їаѓіетепі(); 
Кези бе гѕ=51тї.ехесиќеОпегу(591); 
РогіаІ\Міпаоу жіп=п011; 
мһіе (гѕ.пехі()){ 
// @ Последовательно пройти результаты 
іп 1Аа=г$. зе пЕ ("14"); 
іп х=гѕ. ве пЕ("хРоз") ; 
іп у=гѕ.реї1пі("уРоѕ"); 
11 у= г5. веі пі("уіағћ"); 
10 Б=г$. се 1пЕ(" Ве! 1"); 
5111 иг[=г$. еЕ5 111$ ("игі"); 
Ѕгіпе є е-г$. зе 1г1и$ ("іе"); 
уш=пе\у РогѓаМіпаӢом( 
// © Добавить объект 
іа, иѕег, х,у, \,В,иг/, іе) ; 
1іѕё.ааа(уіп); } 
гѕ .с1оѕе(); 
ѕігаё.с1оѕе(); 
}усаїсһ (5ОГЕхсерНоп за[ех) { 
} 


геїигп 1150; 
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Итак, мы формируем выражение 801. О, последовательно проходим по 
сгенерированному этим выражением набору результатов © и во всех случаях 
добавляем к нашему списку объект Ропа!УИтао\ ©. 

Далее мы используем вспомогательный объект Ј5 О, генерируем код 
инициализации и объявляем объекты окна на ЈауаЅсгірі. Соответствующие 
методы по сути представляют собой упражнения по конкатенации строк, по- 
этому мы не будем приводить здесь класс целиком. Принцип его действия 
демонстрируется в приведенном ниже коде. 


роЫіс {айс 81гіпе іпіёміпаом(РогіаМіпаоу мшаом) { 
ЗишеВиЕЁг ]зВиЁЕ=пем ЗишеВийЙег|) 
.аррепа("СтеаіеМіпаомпему  Мем\Мп(") 
‚аррепа(у1идо\.зе9()) 
-аррепа("' 
‚аррепа(чипаом. веіХРоѕ()) 
‘аррепа(”, р 
.аррепа (иілдон. сеіҮурРоѕ ()) 
.аррепа(",") 
.аррепа (ифлаои. деемтаеъ () ) 
.аррепа (",") 
аа аа даеЕНелате ()) 
.аррепа(",'") 
рева ао еВ) 
.аррепа ("','") 
.аррепа(\м1паом.еТ!е{)) 
.аррепа^")); (ВВ$$)п’); 
геаги  ]3ВуЕЁ. 10511118 (); 
} 


Метод іпіїміпаож () генерирует код ЈауаЅсгірї для инициализации одного 
окна портала. Код ЈауаЅсгірі успешного запроса может выглядеть приблизи- 
тельно так, как показано ниже: для всех окон последовательно вызывается 


функция шИ\шдом () (для улучшения читаемости код был соответствую- 
щим образом отформатирован): 


аӢоситепі.веїЕіетепіВу1Іа(Чоріп' ) 
іппегГНТМІ = Мејсоте Баск!" 
доситепї.веіЕІетепіВу1а('ӢеѓашіСопѓеп') 


.51уІе.аіѕрІау=ідооѓепопеїдиоїѓе; 
Стеае\Мпао\( 


пем Мем\Ми( 
Саоосе1Еадове, 612,115,615,260, 
саџоёеһћёёр: / /ммим. ) ауакапсһ. сомбачо ке, саооёсеЈауакапсһіаиоёе 


] 


Стежме\МЯпао\( 
пем Мем\Мшт( 
{ацоте 21апоте, 10,115,583,260, 
{ацоев р: //мум\м.зоое.сопацо"е ‚{ацо{еСоо=еацоте 
>: 


Й 


СтеаіеМіпаоу( 
пем Меуїл( 
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саооёсезЗіацоёе, 10,387, 1220,300, 
сачоёеһћіір: / /кааіо. ј ауагапсћһ. сот/раѕсаге11оіаооѓе, 
саџооёбеАјах В1ос!ёаџоіе 


>; 

Поскольку мы уже вошли в систему, текстовое окно регистрации и кнопку 
"Отправить" можно убирать; вместо них отображается приветственное сооб- 
щение. Чтобы разместить это сообщение, необходимо будет скрыть содержи- 
мое, по умолчанию располагающееся на экране. Для этого свойство 415р[ау 
элемента РОМ аеѓаџСопіепі устанавливается равным попе, поэтому оно 
убирается из поля зрения пользователя. 

Обрабатывающий окно оператор ЈауаЅсгірі состоит из двух частей. Пер- 
вая часть представляет собой вызов функции СгеаіеМіпаом(), являющейся 
частью добавленной нами библиотеки ЈауаЅсгірі. В вызове функции мы вы- 
зовем новый конструктор объекта. Конструктор создает класс окна, облег- 
чающий обращение к свойствам окна. Функция ЈауаЅсгірі, создающая класс 
окна, должна получить параметры ОКНаја, міаїһ, һеіеһе, хРоѕ, уРоѕ, игі 
и 1 е. Когда сервлет возвратит эту строку клиенту, метод Јауа$сгірќ еуа1 () 
выполнит ее. 


Как правило, мы придерживаемся договоренностей относительно генера- 
ции кода, дающих простой, повторяемый код, вызывающий функции нашей 
библиотеки Јауа$Ѕсгірі. Код инициализации можно поместить в один вызов, 
привязав его к клиенту, но реализовать данную возможность мы предостав- 
ляем читателю в качестве самостоятельного упражнения. 

Использованная нами библиотека ЈауаЅсгірі создает плавающие окна 
Јауа$сгірі. Давайте посмотрим, как сделать эти функции создания окон до- 
ступными на стороне клиента. 


11.4.3. Добавление внешней библиотеки Јамабсгірї 


Как отмечалось ранее, мы используем библиотеку ОНТМГ, которую мож- 
но загрузить с МеБ-сайта уүү.таппіпе.сот. Файл ]З\УЛпдом. јѕ содержит все 
методы РОМ ЈауаЅсгірі, необходимые для создания элементов окон. Кроме 
того, библиотека применяет обработчики событий к объектам окон, так что 
мы можем использовать возможности перетаскивания. Готовые библиотеки 
кода удобны тем, что позволяют сокращать время разработки и обычно ра- 
ботают во всех браузерах. 

Первым делом требуется переименовать файл, чтобы мы могли модифи- 
цировать его. Запишем файл ЈауаЅсгірі под именем А ј ах\УМпдом. ] $ в рабо- 
чей папке. 

Чтобы использовать функции, содержащиеся в АјахУіпаоу. јѕ, необходи- 
мо сослаться на внешний файл ЈауаЅсгірі посредством дескриптора ѕсгірі. 
В дескрипторе ЈауаЅсгірі еіетепі мы используем атрибут згс. Элемент 
ѕсгірі, связывающийся с требуемым файлом .јѕ, необходимо включить в за- 
головок нашей НТМІ -страницы. 


<ѕсгірі їуре="ехі/јауаѕсгірі" ѕгс="Ајах\іпаоҹ.јѕ"Х/ѕсгірі> 





Рис. 11.12. Портал Ајах с тремя открытыми на экране окнами 


Кроме того, нам потребуется таблица стилей окон ОНТМГ, чтобы мы 
могли определить стилевое оформление окна. Для этого загрузите файл 
АлахУ\У!Иш9до\.с$$ с \У’еБ-сайта уүү.таппіпе.сот (или жүү.Яіаіекііка.сот) 
и присоедините его к нашему сценарию, используя дескриптор Пик и ат- 
рибут һгеғ. 

<ПиК те1="ѕіуІеѕһееі" туре="{ех{/с$5" 

Һгеғ="Ајахӱіпаоҹѕ. сѕ5"х/1іпК> 

Итак, мы присоединили к НТМГ-странице файлы ЈауаЅсгірі и С5$, по- 
этому теперь можно проверить, правильно ли мы это сделали. Кроме того, 
проверим, правильно ли код серверной части сценария вызывает библиотеку 
Јауа$Ѕсгірі. Если код присоединен правильно и мы надлежащим образом по- 
лучаем данные с сервера, то после входа в систему с использованием имени 
пользователя и пароля из базы данных мы, согласно хранимой в базе инфор- 
мации, должны получить три окна, показанных на рис 11.12. Помните, что 
созданная нами библиотечная функция формирует окна и связывает с ними 
все требуемые функциональные возможности. Выглядит, как волшебство, по- 
скольку мы вызываем одну функцию, и все работает. 


Открыв окна портала, можно проверить функциональные возможности, 
встроенные в библиотеку ОНТМГ, (функциональные возможности Ајах мы 
пока не рассматриваем). Вообще, в портале можно реализовать следующие 
дополнительные возможности. 


Ы Щелчок на кнопке с пометкой О максимизирует и минимизирует окно. 
е Щелчком на кнопке со знаком х окно можно скрыть. 


• Щелчком на кнопке с буквой \ можно открыть окно ОНТМІ. в собствен- 
ном раскрывающемся окне. 





Рис. 11.13. Другое расположение окон портала Ајах 


. Нажав левую кнопку мыши в то время, когда курсор наведен на заголовок 
окна, окно можно захватить и с помощью мыши переместить на другое 
место. 


Ы Отпустив левую кнопку мыши, мы завершаем операцию перетаскивания. 


Для изменения размера окна необходимо щелкнуть на зеленом квадрати- 
ке в правом нижнем углу окна и перетащить его в требуемое положение. 

В качестве иллюстрации к сказанному обратите внимание на то, что окна 
на рис. 11.13 располагаются не так, как на рис. 11.12. 

Теперь мы можем с помощью библиотеки размещать окна и изменять их 
размеры; далее требуется внести изменения во внешний файл .јѕ. Данные из- 
менения позволят вызывать функцию, с помощью Ајах отправляющую в базу 
данных новые значения свойств. 


11.5. Возможность автоматического сохранения 


Использование Ајах позволяет реализовать функцию автоматического сохра- 
нения, которая может вызываться любым событием (причем пользователь 
об этом знать не будет). Обычно пользователь инициирует отправку инфор- 
мации на сервер, щелкая на некоторой кнопке. В данном случае функция 
автоматического сохранения будет запускаться событием оптоизеир, которое 
завершает процессы перетаскивания и изменения размеров. Если бы мы по 
событию оптопзеир инициировали обычную отправку формы, мы бы нару- 
шили взаимодействие пользователя с порталом и потеряли все, чего с таким 
трудом добивались. Используя Ајах, мы делаем процесс непрерывным. 
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11.5.1. Адаптация библиотеки 


Как отмечалось ранее, код библиотек ОНТМІ. ЈауаЅсгірі обычно приемлем 
во всех основных браузерах, что позволяет нам использовать его, не заду- 
мываясь о вопросах совместимости. Изучая код внешнего ЈауаЅсгірі-файла 
АдлахУЛпдо\.]з, вы обнаружите много интересных функциональных возмож- 
ностей (поскольку соответствующий код довольно длинный, мы его рассмат- 
ривать не будем). Существуют функции, отслеживающие движения мыши, 
имеется функция, отвечающая за создание окон. Вы можете использовать 
функции, устанавливающие положение окна, а также функцию, задающую 
его размер. Имея в своем распоряжении все эти функции, нам недостает лишь 
одного — возможности записи состояния окна в базу данных. Для реализации 
соответствующей функции нам потребуется Ајах. 


Адаптация библиотеки ОНТМЕ под использование Ајах 


Функции библиотеки ОНТМГ, реализующие перетаскивание и изменение раз- 
меров окон, используют множество обработчиков событий и методов РОМ 
для преодоления несогласованности браузеров. Перетаскивание и изменение 
размеров окон завершается при отпускании кнопки мыши. Следовательно, 
нам нужна функция, вызываемая обработчиком события оптои$еир в фай- 
ле Арах\!ш9до\.]5. Эта функция содержит приведенный ниже код, который 
выполняется после отпускания кнопки мыши. 
Чоситеп.оптоизеир = РпсНоп(){ 


БЮгаѕ = Ға1ѕе; 
БВКеѕіле = Ға15е; 


іпаѕёХ = - 1; 
доситепї.бойу.ѕїуІе.сигѕог = "аеѓаи1"; 
@ет\Ит=""; 


ЬНазМоуе4 = Ға1ѕе; 
} 


В данном коде множество булевых переменных получает значение Ёа]5е, 
что обозначает отмену соответствующих действий. Курсор возвращается 
к значению по умолчанию. Нам необходимо изменить строку, в которой от- 
меняется ссылка ејетМіп. Сейчас нам требуется взять эту ссылку и передать 
ее другой функции, чтобы инициализировать объект ХМЕНирКедие$ и пере- 
дать информацию на сервер. 

Хотя иногда адаптация библиотек под нужды текущего проекта требует 
длительного процесса проб и ошибок, в данном случае требуемые функцио- 
нальные возможности достаточно очевидны. Просто добавьте в код обработ- 
чика события оптоизеир строку, выделенную полужирным шрифтом. 


аосимепе .опточзеир = ЕопсЕтол () { 
рргад = Еа1зе; 
рВеѕіле - Ёа1ѕе; 
іпіаѕёЕх * -1; 
аосотепі . ройу.ѕёу1Іе.сигѕог - "аеЕац1"; 


іЁҒ (е1етуїт && БНазМоуеа) бауеМ1паомРкорегЕ1ез (е1етүїіп) ; 
рнНаѕМоуеа = Ға1ѕе; 


464 Часть М. Ајах в примерах 


Полужирная строка в приведенном фрагменте кода проверяет, произошло 
ли перемешение или изменение размеров объекта и существует ли еше эле- 
мент. Если пользователь не выполнил ни одного из указанных действий, то 
нет никаких причин отправлять запрос на сервер. Если же действие было вы- 
полнено, мы передаем ссылку на элемент функции ЅауеМіпӣоуРторегііеѕ () 
которая инициирует запрос на сервер. 


Получение свойств активизированного элемента 


После того как пользователь переместил элемент или изменил его размеры, 
необходимо обновить информацию на сервере в соответствии с новыми па- 
раметрами. Для размещения элементов и задания их ширины и высоты биб- 
лиотека окон ОНТМГ использует С58. Это означает, что нам требуется всего 
лишь получить идентификатор базы данных, координаты и размер окна. Ко- 
ординаты и размер можно получить, изучив параметры С$5, соотнесенные 
с окном, в текущий момент находящимся в фокусе. Затем эти новые пара- 
метры можно отправить на сервер, чтобы с помощью Ајах записать в базе 
данных (листинг 11.10). 


р;Листинг;11:10,;Функция За&Н&о\Ргорегие О '^Ч/ -Щ 
Ғопсіоп ЅауеМіпаоуРгорегііеѕ(){ 
міпрРгорѕ - "теѓ =" + 
еет\УУш.1а; 
//О Получить идентификатор окна 
міпРгорѕ +* "&х=" + 
// © Найти положение окна 
рагѕе1 пі(еіет\іп.ѕїу1е.1еѓї); 
// © Выяснить размер окна 





міпРгорѕ += "&у=" + 
рагѕе1 п(еІетМіп.ѕїу1Іе.іор); 
муіпРгорѕ += "&уү=" + 


рагѕе1пі{еіетміп.ѕіу1е.міаѓһ); 
міпРгорѕ += "&һ=" + 
рагѕе1 пі (еі ет Міп.ѕїу1е. һеіеһі); 
// © Вызвать функцию Ѕеїїіпезѕ 
Ѕеїііпеѕ ("ѕауеЅеїїііпеѕ", міп Ргорѕ); 
е@ет\Уш = ""; 
// © Удалить ссылку на элемент 


Ј е 


Как показано в листинге 11.11, мы получаем идентификатор окна О, об- 
ращаясь к объекту окна. Полученный идентификатор был присвоен окну при 
его создании библиотекой. При присвоении идентификатора библиотека до- 
бавляет жіп перед номером из столбца 14 базы данных (это видно из кода 
Јауа$Ѕсгірі создания окна). 


Координаты х и у левого верхнего угла окна находятся © с помощью 
свойств 1еЁ и {ор таблицы стилей. Кроме того, мы используем таблицы 
стилей для получения размера © окна, обращаясь к его свойствам \14 
И Һеірһї. 
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Получив информацию, мы можем вызывать функцию 5е 112$ () (ее код 
приводится ниже) для отправки запроса на сервер О. Вызвав эту функцию, 
мы должны удалить из глобальной переменной еет\УИп объект, сопоставлен- 
ный с элементом ©. Для этого переменной еіет\іп присваивается значение, 
равное пустой строке. Завершив работу над функцией Зауе\шдо\Ргорег- 
(1е$ (), можно инициировать тихий запрос Ајах на сервер с помощью функ- 
ции ЈауаЅсгірі Зе 11$ (). 


11.5.2. Автоматическая запись информации в базе данных 


Ајах позволяет так отправлять информацию на сервер, чтобы пользователь 
об этом и не подозревал. Такой подход реализован в двух проектах, рас- 
смотренных в данной книге. Мы можем легко отправлять запросы на сервер, 
отслеживая нажатие клавиш, как в сценарии опережающего ввода (см. гла- 
ву 10), и движение указателя мыши (как в данной главе). Подобная невиди- 
мая передача информации очень удобна для разработчиков, поскольку мы 
можем обновлять пользовательские настройки, не требуя от него никаких 
дополнительных действий. В большинстве случаев, чем меньше приходится 
делать пользователям, тем больше они довольны. В данном приложении все, 
что нам требуется для инициации запроса ХМІ.НірКедиеѕі, — чтобы пользо- 
ватель отпустил кнопку мыши. Таким образом, сейчас самое время рассмот- 
реть процесс отправки запроса на сервер. 


Клиент: отправка незаметного запроса 


В данном случае процесс ХМІ.НірКедџеѕі не требует ничего сложного. Поль- 
зователь, взаимодействующий с формой, сам незаметно передает нашей 
функции все свойства формы. Итак, вначале нам необходимо инициализи- 
ровать объект ХМЕНИрКеаче. 
Ѓопспоп Ѕейіпеѕ(хАсіоп,хРагагаѕ)! 
уаг игі ° хАсбоп + ".ѕегуІеї"; 
уаг ѕігРагатѕ = хРагат; 
уаг Іоааег! - пе пеї. СопёепіГ оайег(оигі, 
Ви!аЅеїіпеѕ, . 
ЕггогВиаЅеїііпесѕ, 
"РОЗТ", 
ѕігРагатѕ); 


} 

Рассмотрим функцию 5е 115$ () подробнее. В качестве параметра ей пе- 
редается активизированная строка, содержащая все свойства окна. В нее мы 
добавляем все параметры, отправляемые на сервер. Если обращение к сер- 
веру пройдет успешно, загрузчик вызовет функцию ВиіаЅеїііпеѕ (). Если 
произойдет какой-то сбой, вызывается функция ЕггогВи Иа е 11$ (). 

Ғопсбоп ВиПа5еИ11$$(){ 


ѕігТехі = #1һ15.гед.геѕропѕеТехі; 
аоситепі.веіЕ1етепіВу1а("іуЅеііпезѕ").іппегГНТМІ, = ягТехЕ; 


} 
Ғопсбоп ЕггогВиіаЅеќіііпе5(){ 


аІегі(ғдооѓеТһеге уаз ап еггог їгуіпе іо соппесі 


466 Часть М А/ахв примерах 


Со (Пе зегуег.Едџооѓе); 
дӢосотепё .деЕЕ1етепЕВу1а ("а1убее1п98") .з5у1е.а1*р1ау = "попе"; 





} 

Приведенная выше функция Виі1аЅеїііпоѕ () является очень условной — 
мы просто завершаем объект ХМІ.НирКедиеѕі, полученный с сервера. Еще мы 
можем поместить сообщение в строку состояния портала, указывающее, что * 
информация на сервере была обновлена. Если в процессе обновления инфор- 
мации возникли проблемы, в строку состояния можно добавить сообщение 
об ошибке. Кроме того, генерируется предупреждение, сообщающее пользо- 
вателю об ошибке, однако это нарушает процесс взаимодействия с порталом. 
Готовый механизм уведомления был рассмотрен в главе 6. его интеграцию 
в систему портала предлагаем вам выполнить в качестве самостоятельного 
упражнения. Посмотрим теперь, что происходит на сервере. 


Сервер: сбор информации с клиента 


Все, что нам осталось сделать, — извлечь значения, отправленные в форме. 
Эти значения были посланы объектом ХМЕНИрКеаие$, активизированным 
обработчиками событий оптоџѕеџр. Теперь нам необходимо создать запрос 
ЗОГ, содержащий эту информацию, и обновить запись в базе данных, за- 
писав в нее новые данные. Для этого мы определим класс ОрааѓеЅегу1еї, 
показанный в листинге 11.11. 


НЦПисинг 11.11, Класс ^егуіеї. З^ШШШШШШШШШШЯ. 
рис сіаѕѕ Орд Ме: емепае АЦ { 8 
ргоесе4 уо! 


Нирбеме(Веаиеях гедиеѕї, 
НірёегујеКеро 
Хоу. емо, Еріп 


// О Извлечь из запроса уникальный идентификатор 
гедиез(. веі Рагатеѓег("геЁ"); 
НірЅеѕѕіоп 5ѕеѕѕіоп =гедиеѕі. веі$еѕѕіоп(); 
РогіаМіпдӢом уіпіоу=(РогіаМіпӣож) 


// © Извлечь из сеанса объект УМпао\ 
(ѕеѕѕіоп.реѓАіїгібиѓе 
{"ушдом _"+\т90%19)); 
\шдо\.3е1ХРоз (зе п{Рагатгеаиез{,"х")); 
міпаӢож.ѕеїҮРоѕ(вепіРагатігедиеѕі, "у")); 
міпаӢож ,ѕеі\іаіһ (рео Рагат(гедиеѕі, "у")) ; 
Уп дом. зе Нее (ве пРагат(гедиеѕі, "ћ")); 


// в Записать изменения 
ОВО. зауеРога[МИшдом (мш4о\); 
Утцег  \мгиег=гезропзе. се У тЕег(); 


// Вернуть простой текстовый отклик 
угііег.мгіїіе("Ѕауе Сошр/ ее"); 
жгцег. из (); 


ргіуаќе іпі веі! пРагат(НіїрЅегуІеіКедиеѕі гедиеѕі, 


Глава 11 Улучшенный ИеБ-портал Ајах 467 


ЗЕх1ра рагам) { 

ЗЕх1ра ѕзіг=геаџеѕі .сдесРагапеіег (рагам) ; 
іп кеѕи1іё=Іпбедег.рагѕе1пё (ѕіг); 
геёогп геѕиіё; 








Используя идентификатор окна как параметр запроса О, мы можем из- 
влечь из сеанса объект Роца!МИп4о\ © и обновить его геометрию, опираясь 
на другие параметры запроса. Затем на объекте ОВО вызывается другой 
метод, записывающий настройки окна портала в базе данных ©. Как и ра- 
нее, реализация, представленная в листинге 11.12, очень проста, и ее легко 
перевести на другие языки. 


роЬьіс ѕіаїіс уоіа ѕауеРогіаіМіпаоум(РогіаМіпаоу міпаоу)! 
Соппесііоп сопп=веїСоппесііоп(); 
11 х=№іпаож.веіХРоѕ(); 
11 у=уіпаож.веУрРоѕ(); 
11 м=ұүіпаоу.веіуіа{); 
іп? һ=%уіпаож.веНеівћі(); 
102 іа=ұуіпаож.веіа(); 
Ѕ1гіпо за="ОРРАТЕ роца! міпӣожѕ ЅЕГ хРоѕ="+х 


+ " А уроѕ="'-4-у 
+" іа" 
+" Ве щ=" +В 


+" МНЕВЕ 1а="+1а; 
ігу! 
бсасемепі ѕімі=сопп.сгеаёебёаёетепі () ; 
еше .ехесиёе (ѕа1); 
зіме. с1іоѕе() ; 
}сасһ (501Ехсеріоп ѕдІех){ 
} 





Код, приведенный в листинге 11.12, достаточно логичен. Мы считываем 
нужные детали из объекта РогїаІ\іпаоу и соответствующим образом созда- 
ем обновляющее выражение 801. В данном случае мы будем возвращать не 
ЈауаЅсгірі-код, а простое текстовое подтверждение. 

Чтобы проверить новые функциональные возможности, войдем на портал 
в качестве предполагаемого пользователя. Перетащим окна по экрану и изме- 
ним их размеры, чтобы изменить настройки, заданные по умолчанию. Закро- 
ем браузер, инициировав завершение сеанса. При повторном открытии брау- 
зера и входе в систему (под тем же именем) видим, что окна находятся в том 
же положении, в котором мы их оставили. Переместим окна в новое положе- 
ние и изучим таблицу базы данных. Видим, что настройки пользователя запи- 
сываются автоматически, причем пользователь об этом даже не подозревает. 
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Итак, мы сформировали все базовые функциональные возможности для 
рабочей системы портала, в том числе несколько элементов, которые клас- 
сические М№еБ-приложения просто не могли бы дать. Имеется еще несколько 
элементов, которые можно отнести к категории полезных, например, воз- 
можности добавления, удаления и переименования окон. Из-за ограниченного 
размера книги мы не будем их рассматривать. Впрочем, вы можете загрузить 
полный код приложения-портала, в котором можно добавлять, удалять, пе- 
реименовывать и настраивать свойства окон, не покидая единственной стра- 
ницы портала. Если у вас возникнут какие-либо вопросы, касающиеся приве- 
денного кода, или вам потребуется более подробное его объяснение, вы всегда 
можете связаться с авторами через \\\.тапише.сот. 


Разработанный код можно назвать грубым, однако он эффективен, так 
что мы можем демонстрировать работу его отдельных компонентов. Пожа- 
луй, пришло время передать его группе, ответственной за реструктуризацию, 
и посмотреть, как связать все элементы воедино и облегчить повторное ис- 
пользование системы. 


17.6. Реструктуризация 


Как вы видели, концепция основанного на Адах клиента портала, взаимо 
действующего с серверной частью портала, является довольно убедительной. 
В разделе, посвященном реструктуризации клиентской части кода мы рас- 
смотрим наш компонент как объект, выступающий в роли арбитра команд 
портала, отправляемых менеджеру портала на сервере. В процессе реструк- 
туризации мы постараемся выделить те части кода, которые могут со вре- 
менем меняться, и максимально облегчить эти изменения. Поскольку портал 
представляет собой крулномодульный компонент, а мы в какой-то степени 
можем распоряжаться содержимым страницы, нас не ограничивает требо- 
вание не вмешиваться в НТМІ-разметку страницы (как в двух предыду- 
щих проектах). 

Однако, прежде чем рассматривать семантику клиентской части сцена- 
рия, остановимся на контракте с сервером. Наша предыдущая реализация 
серверного кода была написана на Јауа, поэтому возможности аутентифи- 
кации обеспечивал сервлетный фильтр(один сервлет возвращал конфигура- 
ЦИИ окна, второй — записывал конфигурации окна). Подобным образом, для 
добавления новых окон и удаления текущих мы создадим дополнительные 
автономные сервлеты. В М№еБ-приложениях Јауа сервлеты можно достаточно 
гибко отобразить в ОКІ; данная возможность определена в файле меб.хті, 
содержащемся в загружаемом У№-архиве (.\аг). Например, функция $е- 
1ес1Зегу!е{, возвращающая сценарий, определяющий исходные окна, была 
отображена в ОКГ роца!Шоз1п.зегу[ет. 

Одним из достоинств инфраструктуры Адах является слабая связь меж- 
ду клиентом и сервером. В нашем примере портала в качестве внутрен- 
него интерфейса используется Јауа, но нам совсем не обязательно при- 
вязываться к таким особенностям Јауа, как сервлетные фильтры и гиб- 
кая перезапись ОВГ. Альтернативная внутренняя архитектура может ис- 
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пользовать диспетчер запросов, при которой единственный сервлет (стра- 
ница РНР или ресурс АЗР.МЕТ) принимает все входящие запросы, а за- 
тем считывает параметр, задающий тип выполняемого действия (специфи- 
ка передачи параметра определяется методом: СЕТ или РОЅТ). Напри- 
мер, строка параметров для входа на портал может выглядеть как ас- 
поп=1овіп&иѕегіа=оиѕегѕраѕѕуога=раѕѕуога. Используя Јауа, мы можем ре- 
ализовать подход с помощью диспетчера запросов, присваивая определенный 
префикс ОКГ, например .рогіа1, сервлету диспетчера, что позволит запи- 
сывать такие ОВГ, как Іовіп.рогіаі. 


В реструктуризированном компоненте мы обобщим предположения отно- 
сительно внутренней архитектуры, разрешив либо архитектуру диспетчера 
запросов, либо вариант с множественными адресами, использованный в ре- 
ализации Јауа. Тем не менее от нас не требуется полная гибкость, поэтому 
мы предопределим набор команд, предположительно понятных для внутрен- 
ней архитектуры портала и охватывающих регистрацию, отображение для 
пользователя окон портала, а также добавление и удаление окон из порта- 
ла. Учитывая указанные изменения серверной части приложения, вернемся 
к реализации клиентской части. 


Обсуждение реструктуризации портала начнем с переопределения кон- 
тракта использования с точки зрения НТМІ -кода страницы, а затем при- 
ступим к реализации. Напомним, что введение НТМІ -страницы в сценарий 
портала происходит посредством регистрации, а точнее — с помощью кнопки 
входа в систему. 


<іприі їуре="Бийоп" пате="ЫпЅиб" уаше="оз" 
опсіск="ГоѕіпКедиеѕі(ідиооѓе1оріпідиоѓе)"> 
Мы изменили обработчик события опсі1іск, теперь это вызов функции, 
которая будет использовать наш компонент-портал. Предположим, что этот 
компонент обрабатывается с помощью сценария, выполняемого после за- 
грузки. Характерный пример того, как это должно выглядеть, приведен 
в листинге 11.13. 


Листинг 11.13. Создание портала и вход в систему 
Ғоипсёіоп сгеаёеРогіёа1() { 
пуРогіа1 = пем Рогіа1 ( 
/ / О Основной ОВІ портала 
саооёсерогёа1 Мапасегіаицоѓёе, 





// © Необязательные параметры 
пеѕѕадебрап1а: саооёсеѕрапргосеѕѕіпаёаиооќіе, 
огі5ЧЁ#ЁҒіх: ёаообе.рогіа1ёсаооёе }) ; 
// © Вызвать для загрузки окон 
пуРогёа1 .1оаараде (Рогіа1-0Ар _ЅЕТТІМСЅ_АСТІОМ); 
аосотепё .десЕ1етепеВуТа (саопоёеџѕегпапеіаооіёе) . Ёосиѕ{) ; 











} 

Ғопсёіоп 1одіп() { 

пуРогба1.10одіп (Чосимепе . чесЕ1етерЕВу1А (їаооёецѕегпатеёаиобе) .уа1пое, 
досотепё . сеёЕ1епепЕВута (Е асобераззмогаеаооее) .уа1ое); 
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В такой семантике использования функция сгеа{ерога](), которая 
должна вызываться сразу после загрузки страницы, создает экземпляр ком- 
понента портала. Первый ее аргумент — это основной ОКІ. серверного прило- 
жения портала О, второй предоставляет необязательные параметры, исполь- 
зуемые для ее настройки под конкретный контекст 0. В данном случае мы 
сообщаем функции идентификатор элемента ПОМ, в который следует запи- 
сывать сообщения о состоянии, и имя параметра запроса, который определит 
совершаемое действие. После создания на портале вызывается АРІ [оа4Разе, 
загружающий окна портала, если в сеансе сервера присутствует регистраци- 
онное имя пользователя ©. Если в систему никто не входил, сервер возвра- 
щает пустой сценарий, оставляя на экране только форму регистрации. 


Функция [0211 () представляет собой вспомогательную функцию, вызы- 
вающую метод 10211 {) компонента портала, передающую в качестве аргу- 
ментов имя пользователя и пароль. Согласно данному контракту обработчик 
событий опсііск кнопки регистрации вызывает метод Іоѕіп () страницы. 


<шриё {уре="БаИоп" пате="БіпЅиб" уаше="|озш" опсіск= "Іоріп()"> 


11.6.1. Определение конструктора 


Разобравшись с использованием компонента с точки зрения страницы, зай- 
мемся реализацией логики. Начнем с конструктора. 

Ғопсіоп Рогѓа1( Базе От, орНопз ) { 

{015.БазеПт| = Базе 11; 
1015$. орНоп$ - орііопз; 
115.101 ОоситепіМоиѕеНапаіег(); 

В качестве первого аргумента приведенный конструктор принимает ОКІ. 
средства управления порталом Ајах на сервере, а в качестве второго — объ- 
ект опций, используемый при определении конфигураций. Напомним, что 
в первом варианте данного сценария использовался сервлетный фильтр и два 
сервлета, выполняющих внутреннюю обработку. Далее мы будем предпола- 
гать, что все запросы к внутренней части портала будет перехватывать один 
сервлет, или ресурс рогіа1 Мапавег (см. листинг 11.13). Если нам требуется 
сконфигурировать портал с учетом внутренней архитектуры, не использу- 
ющей единственный диспетчер запросов, мы можем передать конструктору 
различные аргументы, например: 

пуРогіа1 = пем Рогіа1 ( 

сосооёседаёаіаиоѓе, 


{ меѕѕадеЅрап1а: ёаоџоёбеѕрапрРгосеѕѕіпаоіацоіе, 
огібиЁЁ іх: ёаообе.рһріацџоёе } 


); 

Таким образом, мы передадим основной ОВГ "данных" и, поскольку 
в массиве опций определен параметр асійопРагат, добавим к пути ОКІ. 
команду с суффиксом .рһр, получая в результате ОКІ, подобный аа- 
ќа Ловіп,рһр. Следовательно, мы получаем всю необходимую на данный 
момент гибкость. Вопрос превращения опций в ОКІ будет рассмотрен в раз- 
деле 11.6.3. Сейчас же мы перейдем к следующему заданию. Итак, из по- 
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следней строки конструктора следует необходимость адаптации библиоте- 
ки Адах\/ш9о\з.]з. 


11.6.2. Адаптация библиотеки А/ахИ/птаом/5.]5 


Напомним, что реализация данного портала использует внешнюю библиоте- 
ку Ајах\іпаожѕ.јѕ для создания отдельных окон портала и управления их 
размером и положением на экране. В связи с этим нам, в частности, требует- 
ся адаптировать библиотеку для отправки запросов Ајах менеджеру портала, 
чтобы записать настройки после события топзеир. Мы отслеживаем данное 
действие потому, что теоретически им заканчиваются все операции перемеще- 
ния и изменения размеров. Первое, что мы сделали для выполнения данной 
адаптации, — скопировали код библиотеки Ајах\іпӣожѕ.јѕ и изменили в нем 
фрагмент, помещающий в документ обработчик событий топзечр. Если рас- 
сматривать библиотеку АјахМіпӣож.јѕ как продукт стороннего производите- 
ля, то недостатки данного подхода очевидны. Мы отошли от кода чужой биб- 
лиотеки, т.е. модифицировали исходный код и поведение библиотеки так, что 
они перестали быть совместимыми с версиями, поддерживаемыми авторами 
библиотеки. Если библиотека изменится, нам придется согласовывать его со 
своими изменениями при выходе каждой следующей версии. Мы ничего не 
сделали, чтобы изолировать место изменения и сделать его как можно более 
"безболезненным". Поэтому рассмотрим менее радикальный подход к адап- 
тации и выясним, можно ли как-то исправить данную ситуацию. Напомним, 
что последняя строка конструктора выглядела следующим образом: 
1615. ши)оситепМочзеНап ег(); 


Метод шИО)оситеп(МоизеНапа [ег () представляет оперативную адапта- 
цию библиотеки АјахМіпаоҹѕ.ј5. Он, как и ранее, просто перезаписывает 
обработчик йоситепі.оптоиѕеир, но делает это уже в нашем собственном 
коде. Теперь логика, требуемая для адаптации внутри метода портала Вап- 
@1еМоиѕе0р(), реализована в нашем методе (листинг 11.14). 


Листинг 11.14. Адаптация обработчика Ајах\іпаомѕ.јѕ 








іпіёросимепіМоцѕеНапа1ег: Ёопсііоп() { 

уак отһіѕ = 661$; 

аосотепі . оптоцѕецр = Ёџпсііоп() { отһіѕ.һапа1емоџѕеур(); }; 
Ь 
Һапа1емоџѕеу0р: Ёџпсёіоп() { 

рргад = Еа1зе; 

рКеѕіхле = Ёа1ѕе; 

іпёіаѕіх = -1; 

аосимепте .ройу.ѕёу1Іе.сигѕог = "аеЕао1"; 


1Е { е1етиіп && БНазМоуеа ) 
Ср1$5$ . ѕзауеіпаоиРгорегёіеѕ (е1епуїіп.іа) ; 
ЪНазМоуеа = Ға1ѕе; 


Ь Я Л 





Это решение уже гораздо лучше, но это еще не все. Если библиотека 
АјахМіпаожѕ.јѕ определяет обработчик тоџѕеир в именованной, а не в ано- 
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нимиой функции, то этот обработчик можно сохранить под другим именем и 
вызывать из нашего собственного обработчика. Таким образом, мы не будем 
дублировать логику, уже определенную в библиотеке АдахУЙп9до\$.]5. Дан- 
ный подход иллюстрируется в приведенном ниже коде. 
Ғопсііоп ајах\іпаоуѕМоиѕеОрНапаіе() { 
// 1овіс Беге... 
} 


Чосимепе.опмоцзеир = аЗахМ1паомзМоцзе0рНапа1ег; 

Функция ајах\іпаомѕМоиѕеОрНапӣіег () представляет собой обратный 
вызов, определенный внешней библиотекой АахУ19до\$.}5. Как показано 
ниже, ее применение позволит сохранить определение метода и использовать 
его позже. 

шиОоситепМочзеНап ег: Рапсйоп() { 

{615.адахУИи4о\м$МочцзеОрНапМ ег = 
ај ах\УИпдом$МоизеОрНапаЕг; 
// О Сохранить нашу собственную ссылку 
уаг оТһіѕ = 111$; 
аоситепі.оптоиѕеир = Гипс опт() { оТтһіѕ. вап 1еМоизеОр(); }; 


Ь 


// © Вызвать библиотечную функцию 
Һапаї1емМоџѕе0р: Ёопсёіоп() { 
СҺіѕ.ај ахїіпаоиѕМоџѕе0рНапа1ег () ; 

// © Добавить функциональные возможности Ајах 

1Е { еїІепиіп && БНазМоуеа ) 
ЕҺіѕ.ѕауеіпадоиРгорегёіеѕ (е1егайіп.іа) ; 

>, 

Теперь наш метод һапаїіеМоџѕе0р () не должен дублировать функцио- 
нальные возможности библиотеки Ајах\іпаоҹѕ.јѕ. Необходимые возможно- 
сти мы вызываем © посредством записанной ссылки О, а затем добавляем 
функциональные возможности Ајах ©. Если же обработчик тоизеир биб- 
лиотеки Ајах УМпдо\з в будущем изменится, то эти изменения не потребу- 
ют модификации нашего кода. Это уже более приятная ситуация с точки 
зрения управления изменениями. Разумеется, она предполагает, что подра- 
зумеваемый контракт с библиотекой не изменится — имеются в виду две 
глобальные переменные, @ет\УИп и НазМоуеа. Поскольку в текущий момент 
библиотека определяет обработчик шоизеир как анонимную функцию, мы 
по-прежнему можем записать ссылку на существующую функцию обработки 
события тоиѕеир, используя следующую строку кода: 


(615$ .а)ахМ1паомзМоцзе0рНаптЯ1ет - (11$.аосоамепе .опмопзеир; 


Таким образом, мы добиваемся того же результата, что и ранее, но теперь 
решение гораздо изящнее, поскольку в данной ситуации контракт гораздо 
слабее. Приведенное решение основывается на том, что мы включили наши 
эиблиотеки сценария в правильном порядке, т.е. библиотека Адах\п940\5.]5 
уже выполнила код, помещающий в документ обработчик топзеир. Кроме то- 
^о, предполагается, что никакая другая библиотека не поместила в документ 
зругой обработчик событий тоизеир или реализовала другой интерфейсный 
подход, подобный нашему. 


Пожалуй, это все, на что можно надеяться при адаптации библиотеки. 
Перейдем теперь к АРІ портала. Изучая метод вап еМочзеОр (), можно до- 
гадаться об одной из трех команд портала, которые должен иметь компонент 
портала. При отпускании кнопки мыши вызывается метод зауе\УМидо\Ргор- 
егііеѕї), записывающий состояние и положение текущего окна. Ниже мы 
подробно рассмотрим детали этого процесса, а также разберем другие АРІ 
команд портала. 


11.6.3. Задание команд портала 


Как обсуждалось выше, наш компонент портала, в первую очередь, является 
отправителем команд. Отправляемые команды представляют собой запросы 
Ајах к серверной системе управления порталом. Понятие команд и формаль- 
ную структуру Соттапа в Ајах мы уже рассматривали в главах 3 и 5. Теперь 
мы изучим другую возможность использовать данные знания. 

Итак, мы организовали в портале поддержку таких команд: регистрация, 
загрузка и запись настроек. Еще мы собираемся ввести возможность добавле- 
ния и удаления окон, о которой мы уже упоминали, хотя и не показывали ее 
полную реализацию. Перечисленные возможности можно представлять как 
методы нашего портала. Однако, прежде чем мы начнем рассмотрение кода, 
выполним подготовительную работу, которая поможет нам в локализации 
изменений. Прежде всего, мы имеем в виду имена самих команд. Давайте 
определим символы для всех имен команд, чтобы их можно было использо- 
вать в любой части компонента. Рассмотрим следующий набор символов: 














Рогіа1 .ГОСТМ_АСТТОМ » "10о9діп"; 
РогЕа1.ТОАБ__ЗЕТТТМС$_АСТТОМ - "РадеЦоаа"; 
РогЕа1.сАУЕ_СЕТТТМС$_АСТТОМ = "Орааёергадиіпаои" ; 
Рогба1 . АБО _МТМРОМ_АСТТОМ - "АЗЯИМ1паом" ; 
Рогеа1.РЕГЕТЕ_МТМРОМ_АСТТОМ - "Бе1ебем1и9ом"; 

















Хотя используемый язык и не поддерживает напрямую константы, пред- 
положим, что, используя договоренность о прописных буквах, можно считать 
указанные значения постоянными. Мы можем просто провести данные стро- 
ковые литералы через наш код, но данный подход слишком неаккуратен. При 
подобном использовании констант наши "магические" строки будут распола- 
гаться в одном месте. Если контракт сервера изменится, мы сможем к этому 
приспособиться. Представим, например, каким образом может измениться 
контракт сервера (табл. 11.1). 

Теперь, когда мы можем обращаться к командам с помощью указанных 
символов, рассмотрим общий механизм передачи серверу команд управле- 
ния порталом. Нам потребуется вспомогательный метод, в общем виде от- 
правляющий серверу Ајах-команды портала. Рассмотрим данный контракт 
использования. 

турРогѓа1.іѕѕоеРогіаІСоттапа( Роца|.ЗАУЕ ЗЕТТПМО$ АСПОМ, 

"ѕвеїіпе1=" + зеишяУаще, "ѕеїііпе2=" + зе тя2Уаше, ... >" 

В данном сценарии мы рассматриваем метод іѕѕиеРогіаІСоттапа(), при- 

нимающий в качестве первого аргумента имя команды (например, одну из 


Таблица 11.1. Изменения открытого контракта 


Изменение контракта сервера Требуемое действие 

Переименована команда (например, Заменить правую часть оператора присваивания 
Радеіоаа заменена глагольной константы ІОАЮ ЅЕТТІМОЅ АСТІОМ новым 
формой Гоаараде) значением. Остальная часть кода не меняется 
Сервер больше не поддерживает Удалить контракт и выполнить глобальный поиск 
команду всех упоминаний команды. В каждом случае 


произвести необходимую модификацию кода 


Сервер поддерживает новую команду Добавить константу для этой команды 
и использовать ее имя в коде 


наших констант) и переменное число аргументов, соответствующих парамет- 
рам, которые ожидает/требует команда. Как и следовало ожидать, парамет- 
ры имеют точно такую же форму, которая требуется методом ѕепіаКедиеѕі() 
объекта пеї.СопіепіГоайег. Определенный нами метод іѕѕџиеРогіа1Сот- 
тапа() можно реализовать следующим образом: 


іѕѕиеРогќаІСоттапа: РапсНоп{ соптпапіћате ) { 
//О Получить параметр действия 

уаг асїііопРагат - {1015. ор 101$ [аџооѓеасііопрагатідиооѓе |]; 
// © Получить суффикс ОК 


уаг иг! ЗиЁНх = #һіѕ.орііопѕ[їдиоѓецгі $ и#Ёіхідиоќеј; 
1 ("огіЅоғғіх) огіѕиЁѓіх=""; 
уаг игі = 101$.БазеОг!; 


уаг са11Рагтюѕ •" []; 
1Е (асёіопРакат) { са11Рагтѕ.риѕһ ( 
// © Применить параметр действия 
асс1опРакам + "=" + соптапаМапе ); 
}е1зе{ 
// О Применить суффикс ОВЬ 
орі += "/" + соптапЯМате + ах15аЕЕ1х; } 
Ғор ( уар і = 1 ; і < агдомепе$ .1етаеЮ ; 1++ ) 
са11Рагтѕ.роѕһ( асоотепіѕЕі] ); 
уаг ајахНе1рег = пе 
// О Создать объект СопёепіІоадег 
пеё.СопеепеГоаает( ёҺіѕ, игі, "РОЗТ", [] ); 
ајахНе1рег. ѕзепавкесиеѕі 
// 0 Отправить запрос 
‚арр1у( ајахНе1рег, са11Рагиз ); 








№ 

Данный метод создает ОВГ, основываясь на конфигурационных опциях, 
обсуждавшихся в разделе 11.6.1, Если мы установили значение асііопРагат 
О, оно будет добавлено к параметрам с помощью РОЅТ, передаваемым на сер- 
вер ©. Если нет, мы добавим команду к пути ОКГ О, присоединяя суффикс 
ОКІ., если он указан в опциях ©. Первый аргумент функции — имя команды. 
Все остальные аргументы рассматриваются как параметры запроса. Затем 
сформированный ОВГ, передается объекту Сот{еп .оа4ег ©, и, как показа- 
но в предыдущем примере, отправляется запрос со всеми предоставленными 


параметрами ©. Благодаря данному методу все АРТ команд нашего порта- 
ла будут очень лаконичными . Еще один "бонус" подобного общего метода 
заключается в том, что мы можем поддерживать новые команды, появля- 
ющиеся на сервере, не меняя код клиентской части приложения. А теперь 
рассмотрим команды, которые мы уже знаем. 


регистрация 


Напомним, что обработчик событий опсИсК нашей кнопки регистрации ини- 
циирует вызов метода 10211 () страницы, который в свою очередь вызывает 
указанный выше метод. Функция 10211 (по крайней мере, с точки зрения сер- 
вера) представляет собой команду, которую сервер должен обработать, про- 
верив предоставленную пользователем регистрационную информацию, а за- 
тем (если эта информация верна) ответив так же, как команда 1оа4-разе. 
Учитывая сказанное, рассмотрим реализацию функции Іовіп (), показан- 
ную в листинге 11.15. 


Іовіп: Ёџпсііоп(иѕегМате, раѕѕуога) { 

ћ1ѕ.иѕегМате = изегМате; 

һіѕ.раѕѕуога - раз5\ога; 

Ш ( 015.орііопѕ.теѕѕавеЅрапіа ) 

доситепё.веіЕІетепіВу1а( 

(ріс. орііопѕ. теѕѕавеЅрап!4) .іппегНТМІ. = 
"Уегіѓуіпе Сгеаепііа15"; 

{ћіѕ, іѕѕиеРогіаІСоттапа( Ропа!. ГОСІМ . АСТІОМ, 


" " 


"изег=” + 101$. 9зегМаше, "раѕѕ=" + (ћіѕ.раѕѕмога ); 


Ь Е 





Данный метод помещает сообщение "Мегіѓуіпв Сгейепіа1ѕ" в элемент зрап, 
определяемый настраиваемой опцией һіѕ. орііопѕ .теѕѕавеЅрапіа. Затем он 
отправляет команду Іоѕіп внутреннему коду портала, передавая регистра- 
ционную информацию, полученную методом в виде параметров запроса. Всю 
сложную работу выполняет метод іѕѕиеРогіаІСоттапа{). 


Загрузка настроек 


Напомним, что функция сгеаѓеРогѓаі () нашей страницы вызывает указан- 
ный выше метод для загрузки исходной конфигурации окон портала. Для 
загрузки настроек страницы применяется метод, который даже проще рас- 
смотренного выше метода регистрации. Это просто удобная интерфейсная 
оболочка вокруг команды іѕѕиеРогѓаІСоттапа!). В качестве единственного 
своего параметра, используемого сервером для загрузки нужных настроек 
окон, она передает имя пользователя. 


ІоааРаве: Ғоипсіор(асіоп) { 
115.і$ѕие РогѓаІСоттапа( РоќаіОАр ЅЕТТІҸСЅ АСПОМ, 


" " 


"оѕег=" + 15.изегМаште, "раѕѕ=" + 1115.разз\мога ); /, 
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Запись настроек 


Метод записи настроек также достаточно прост. Напомним, что данный ме- 
тод вызывается адаптированной библиотекой АјахМіпаожѕ.јѕ при наступле- 
нии события тойзеир и производит запись всех операций перемещения и из- 
менения размеров. 


ѕауеМіпаоуРтгорегііеѕ: Ғипсііоп(1а) 
{015.15зпеРоца1Соштапа( ропа. ЅАУЕ ЅЕТТІМС5 АСТЮМ, 
"теѓ =" + 14, "х=" + рагѕеаі(еіетміп.ѕїуІе.Іей), 
"у=" + рагѕе1пі(еіетмМіп.ѕіуІе.іор), 
» =" + рагѕе1пі(еІет\іп.ѕїуІе.уіагһ), 
"ћ=" + ратѕепі(еіет\іп.ѕёуІе.һеівһі) ); 


еетМп = пои; }, 


Добавление и удаление окон 


Хотя мы не полностью разработали концепцию добавления и удаления окон 
(по крайней мере, с точки зрения пользовательского интерфейса, удобного 
для инициации этих действий), мы можем определить командные методы 
АРІ, поддерживающие указанные операции. 


аааўіпаоу: Ғоипсііоп (іе, игі, х, у, ж, В) { 
{61$ . іѕѕиеРогіаІ Соттапа ( РогѓаІ Арр ММҸРОҸ АСТЮМ, 
"Е е-" + іе, "оигі-" + гі, "х=" + х, 
"у=" + у, "=" +, Вета) } 
аеІеѓеМіпаом: Гапс оп (14а) { 
уаг ЧоОе[е{е * 
сопѓЁігт("Аге уои зиге уоџ мапі їо Яе1еїе 111$ жіпӣож?"); 
іғ(аоОеіеѓіе) #һі1ѕ.іѕѕие РогіаІ Сот тапа( 
Рогѓа. ОЕЕТЕ МІМРОМ АСТІОМ, "геѓ=" + іа ); }, 


Данный метод завершает обсуждение программных интерфейсов, требу- 
емых для поддержки команд портала. Рассмотрим теперь обработку Ајах 
на портале. 











11.6.4. Обработке средствами Ајах 


Как уже отмечалось, в данном примере мы используем технологию Ајах для 
обработки ответов. В частности здесь реализуется взаимодействие, ориенти- 
рованное на сценарии. Описанная технология основана на том, что ожидае- 
мый ответ сервера представляет собой приемлемый код ЈауаЅсгірі. При таком 
подходе очень желательно, чтобы клиенту для понимания ответа не требова- 
лось выполнять какую-либо сортировку или синтаксический анализ. Ответ 
вычисляется с помощью метода ЈауаЅсгірі еуа1 (), и в дальнейшем с клиента 
снимается вся ответственность. Недостаток данного подхода состоит Б ТОМ, 
что вся ответственность возлагается на сервер, который отвечает за понима- 
ние клиентской объектной модели и генерирует синтаксически верный ответ, 
согласующийся с требованиями языка (ЈауаЅсгірї). Второй недостаток опи- 
санного подхода частично устраняется с помощью использования для опре- 
деления откликов популярной разновидности рассматриваемой технологии — 
ТЗОМ. Существуют определенные серверные библиотеки, помогающие гене- 


рировать отклики ЈЅОМ (см. главу 3), хотя они ближе к тому, что в главе 5 
называлось подходом, ориентированным на данные. 

Пока же мы собираемся придерживаться взаимодействия, ориентирован- 
ного на сценарии, поэтому сейчас обратимся к нашей реализации и посмот- 
рим, что можно сделать для его развития. Начнем с функции ајахирӣаѓе() 
и вспомогательной функции гип$сгірі(). 

а) ахОрдаЕе: ЕорсЕетоп (кесиоеѕіё) {&51$.копбск1ре (гесиџеѕі .гезропзеТехе);' 

гопбсгірё: ЕопсЕтоп (ѕсгірёТехё) {еуа1 (зсклрЕТехё);}, 

Как обсуждалось выше, обработка ответа слишком проста. Все, что мы 
делаем, — это вызываем метод гипЅсгіріО с параметром геѕропѕеТехї 
("текст ответа"), и гип$сгірї () применяет функцию еуа! () к тексту отклика. 
У вас может возникнуть вопрос: "Почему бы вообще не избавиться от метода 
гипЅсгірі() и просто вызывать еуа|() из метода а] ахОрдае ()?" Да, это 
действительно допустимый и полезный подход. Тем не менее иногда удобно 
иметь метод, инкапсулирующий концепцию запуска сценария. Например, что 
будет, если мы добавим в реализацию гипЅсгірі () этап предварительной или 
последующей обработки? Опять же мы изолировали место изменения. К сча- 
стью, метод ај ахОрда{е () не замечает изменения, и мы получаем новое пове- 
дение. Одной из интересных сфер применения описанной технологии может 
быть препроцессор, выполняющий замещение значений, перед выполнением 
функций, располагающихся на стороне клиента. 


В завершение обсуждения обработки Адах рассмотрим первостепенную 
по важности тему обработки ошибок. В связи с этим напомним, что метод 
ВапеЕгтгог (), так же, как и метод ајахОрааїе(), является неявным кон- 
трактом, требуемым для сообщения с пеї. Сощеп оадег. Реализация метода 
ВапеЕггог () приведена ниже. 


БапеЕггог: ҒЁипсіоп(гедиеѕі) { 

Ш (0һ15.орііопѕ.теѕѕавеЅ$рап!а) аоситеш.еЕетенВУ1а 
(Ећіѕ.орііопѕ.теѕѕавеЅрапі1а) 1ппегНТМГ «• 
"Оорѕ! Зегуег еггог. РІеаѕе ігу аваіп 1аїег.";}. 

Данный метод проверяет существование конфигурационного свойства 
теѕѕавеЅрапіа и при его наличии использует его в качестве элемента, 
отображая сообщение "Оорѕ!" в пользовательском интерфейсе. Фактический 
текст сообщения также можно представить как параметр с помощью объек- 
та опций. Сделать это предлагается читателям в качестве самостоятельно- 
го упражнения. 

Таким образом, мы завершаем разговор о реструктуризации компонента- 
портала. Мы создали обманчиво простой механизм, поддерживающий управ- 
ление порталом на основе Адах. Потратим несколько минут и подытожим, 
чего же мы добились в ходе реструктуризации. 


11.6.5. Выводы 


По нескольким параметрам разработка данного компонента достаточно отли- 
чается от всех остальных примеров, приведенных в данной книге. Во-первых, 
МЫ разработали крупномодульный компонент, предоставляющий ВОЗМОЖНО- 


сти портала на основе Ајах. Вряд ли какой-нибудь разработчик пожелает по- 
местить систему-портал в угол своей страницы! Во-вторых, мы использовали 
технологию обработки откликов Ајах в виде кода ЈауаЅсгірі. При реструк- 
туризации данного компонента мы старались изолировать точки изменения. 
Это было проиллюстрировано несколькими способами. 


• Мы создали понятный способ адаптации библиотеки Ајах\іпаоуѕ.јѕ. 
• Изолировали строковые литералы как псевдоконстанты. 
. Написали общий метод генерации команд. 


• Концепцию запуска ответного сценария Ајах изолировали с помо- 
щью метода. 


11.7. Резюме 


Портал — это, пожалуй, один из наиболее мощных инструментов, которые 
могут находиться в распоряжении компании. Компания может настроить 
бизнес-логику, позволяющую пользователям просматривать только ту ин- 
формацию, которая их касается. Кроме того, порталы разрешают пользова- 
телям настраивать внешний вид окна согласно собственным предпочтениям, 
что позволяет повысить производительность труда, поскольку страница вы- 
глядит точно так, как того желает пользователь. 

Используя Ајах для реализации портала, можно сохранить все функци- 
ональные возможности в одной области, не требуя отправки на сервер мно- 
жества страниц. Теперь при выходе пользователя в систему уже не нужно 
думать, какое действие соотнесено с кнопкой "Назад". Истории прохождения 
страниц уже нет, поскольку мы никогда не покидаем единственную страни- 
цу. Мы говорили о недостатках выхода со страницы, но данная проблема 
решается с помощью запроса сервера с использованием Ајах. 

Кроме того, мы отправляем запросы на сервер, не уведомляя пользовате- 
ля о записи данных. Инициируя Ајах посредством обработчиков событий, мы 
можем записывать данные быстро, не нарушая взаимодействие пользователя 
с порталом. Портал, использующий Ајах, переводит богатый пользователь- 
ский интерфейс на новый уровень производительности. 

В последнем разделе данной главы мы рассмотрели реструктуризацию 
кода портала, а в предыдущих разделах сосредоточили внимание на созда- 
нии компонента с возможностью повторного использования, который можно 
поместить на существующую страницу. В данном случае такой вариант не 
подходит, поскольку портал представляет собой оболочку, в которой распо- 
лагаются все остальные компоненты. При реструктуризации мы акцентиро- 
вали внимание на повышении удобства эксплуатации кода, изолируя стро- 
ковые константы, создавая общие методы и более четко отделяя библиотеки 
сторонних производителей от нашего кода. 

В данной главе мы генерировали простые ответные ХМГ-документы от 
сервера и вручную декодировали их с использованием ЈауаЅсгірё. В следую 
ющей главе мы рассмотрим альтернативный подход: использование таблиц 
стилей ХЅІТ на стороне клиента для преобразования абстрактного ХМГ- 
кода непосредственно в НТМГ-разметку. 
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В этой главе. 


• Технологии динамического поиска 

• Использование ХЅІТ для трансляции ХМІ. в НТМІ. 
• Закладки на динамическую информацию 

• Создание компонента "живого" поиска 
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Инфраструктура Ајах позволяет сделать так, чтобы во время выполнения 
сервером трудоемких операций пользователь не терял контроль над тем, что 
происходит на стороне клиента. Если процесс обработки довольно длитель- 
ный, пользователю можно предоставить анимированное СТЕ-изображение 
уведомляющее его о происходящем. Кроме того, во время выполнения сервер- 
ного процесса пользователь сможет производить другие действия, при этом 
не думая, что браузер "завис". 

В данной главе мы используем данную технологию Ајах для создания 
"живого" поиска. С помощью ХЅІТ (ЕхѓіепѕіЫе ЅіуІеѕһееі Гапеџаве Тгапѕѓог- 
таійопѕ — расширяемые преобразования языка таблиц стилей) мы будем пре- 
образовывать ХМІ-документ в НТМГ-структуру. Отметим, что трансляция 
с помощью ХЗГТ удобнее разбора ХМГ-кода вручную и создания НТМГ с ис- 
пользованием выражений Јауа$Ѕсгірі. В ней динамически генерируется ХМГ- 
документ, которым мы заменяем код серверной части сценария и ЈауаЅсгірі- 
код, составлявший основу предыдущих проектов. Таким образом, мы больше 
не будем вручную проверять, что все элементы НТМТ, сформированы надле- 
жащим образом. 


Как и в предыдущих примерах, вначале мы разработаем код "в лоб", 
а затем реструктуризируем его в компонент с возможностью повторного ис- 
пользования. Прочитав эту главу, вы поймете принципы использования ХЅІТ 
с Ајах и получите готовый компонент поиска, который сможете применять 
в собственных проектах. 


12.1. Понимание технологий поиска 


Мы уже привыкли, что выполнение поиска на сервере "дополняется" демон- 
страцией застывшей страницы. (По крайней мере, на УМеБ-сайтах, не распола- 
гающих кластером из 1 200 серверов, менее чем за секунду выполняющих по- 
иск на 8 миллиардах страниц.) Чтобы убрать паузу, некоторые разработчики 
создают всплывающие окна и фреймы. Иногда для обработки используется 
дополнительное окно, что приветствуется пользователями, но также создает 
определенные проблемы. Используя Ајах, мы можем избежать использования 
фреймов и привычных задержек в классических операциях отправки форм. 


12.1.1. Классический поиск 


Рассмотрим классический процесс поиска. Включив форму поиска в \- 
сайт, мы предполагаем отправлять один или несколько элементов на сервер 
для дообработки. В качестве примера можно привести основную страницу 
поиска Соое. Эта страница (\\\.гоо е.сот) содержит единственное тек- 
стовое окно и две кнопки поиска. В зависимости от выбранного действия 
форма либо перенаправит нас на список записей (с помощью которых мы 
можем переходить на требуемые страницы), либо переведет на страницу, со- 
ответствующую одной из позиций названного списка. Подобная структура 
прекрасно подходит для страницы, с которой не связаны никакие другие 
функциональные возможности, однако если поиск является частью большого 
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Рис. 12.1. Классическая модель поиска 


с обозначенными этапами обработки Браузер 


проекта, описанное решение может порождать проблемы — потерю состоя- 
ния страницы, очистку полей формы и т.д. На рис. 12.1 приведена диаграмма 
классической модели поиска, когда вся страница отправляется на сервер для 
обработки, а возвращается совершенно новая страница с результатами 

Одним из источников задержек является то, что запросы к базе данных 
могут обрабатываться довольно долго. Действия с браузером недоступны 
пользователю до тех пор, пока не будут отображены результаты, при этом 
страница кажется "зависшей". Иногда разработчики пытаются как-то бороть- 
ся с данным периодом неактивности, например, уведомлять пользователя 
о том, что процесс идет. Здесь важно отметить, что проблема недоступности 
не ограничивается операциями поиска. С ней можно столкнуться при обнов- 
лении или удалении записей из базы данных, запуске сложной транзакции 
на стороне сервера и т.д. 

В качестве средства борьбы с описанным явлением разработчики ис- 
пользуют анимированные С @Е-изображения (например, заменяющие собой 
строку состояния), вызываемые в то время, когда сервер обрабатывает от- 
правленный запрос. Вопрос о том, как это можно сделать, является од- 
ним из самых популярных на различных форумах, подобных ЈауаКапсһ 
(муү.ЈауаКапсһ.сот). Однако проблемой анимированных СТЕ-изображений 
является то, что они запускаются не всегда. В Місгоѕоћ Іпїегпеї ЕхріІогег 
СТІЕ-анимация часто замирает на первой картинке, не демонстрируя цикличе- 
ски предполагаемый набор изображений. Разработчики знают, что некоторые 
пользователи, не видя анимации, считают, будто браузер "завис", и щелкают 
на кнопке обновления или закрывают браузер. 

Классическая форма поиска подвержена тем же проблемам, которые опи- 
сывались в предыдущих примерах, требовавших повторной визуализации 
страницы. Из-за загрузки новой страницы, которая отображается в начале, 
а не втом месте, до которого была прокручена на момент инициации обновле- 
ния, информация о прокрутке страницы может теряться. Данные, введенные 
в поля формы, могут исчезать, и пользователю придется вводить их заново. 
Разработчики пытаются решать эти проблемы с помощью фреймов и всплы- 
вающих окон, но-прл этом порождают еще больше проблем. Что ж, давайте 
посмотрим, почему это происходит. 


Обработка поиска 
игенерация 
фрейма 


Визуализация 
фрейма 


Рис. 12.2. Процесс поиска 
рауғер с использованием фреймов 





12.1.2. Недостатки использования фреймов 
и всплывающих окон 


Для решения проблем кажущегося "зависания" страниц, потери положения 
прокрутки и т.п. разработчики традиционно применяют фреймы (обычные 
и 1Етате) и всплывающие окна. Фреймы и всплывающие окна позволяют 
продолжать обработку в другой части УМеб-страницы, так что пользователь 
может работать с фрагментом формы, инициировавшим обработку. Причем 
не только пользователь может манипулировать формой, параллельно могут 
выполняться и другие функции ЈауаЅсгірї. 

Фреймы и всплывающие окна имеют и другие преимущества. Использова- 
ние фреймов позволяет прокручивать возвращаемый набор записей, оставляя 
при этом элементы поисковой формы в поле зрения пользователя. Всплыва- 
ющее окно позволяет отображать результаты в отдельном окне, вынося обра- 
ботку из основного окна. Правильным образом организовав связь родитель- 
ского окна с дочерним, можно при возврате результатов передавать данные 
из дочернего окна в родительское. Всплывающие окна невероятно полезны 
при внедрении поиска в больших формах, где пользователю требуется опреде- 
ленная трудно запоминаемая информация. Кроме того, можно сделать так, 
чтобы окно закрывалось после завершения обработки. Это полезно, когда 
требуется обновить страницу, не передавая на сервер никаких данных. 

На рис. 12.2 показано, как реализован поиск во фрейме. Нижний фрейм 
отвечает за отправку поискового запроса на сервер, позволяя обрабатывать 
результаты. Поскольку поиск инициировал нижний фрейм, верхний фрейм 
окна по-прежнему доступен пользователю (в отличие от классической схемы 
поиска, показанной на рис. 12.1). 

Хотя описанные подходы и решают одну проблему, они приводят к воз- 
никновению других. Фреймы были и остаются одним из самых страшных 
кошмаров разработчиков. Основная проблема, связанная с ними, — это на- 
вигация, поскольку мы не знаем, как фрейм будет взаимодействовать с бра- 
узером. Мы не знаем, как повлияет на фрейм кнопка "Назад". Вернет ли 
фрейм нас на нужную страницу, уничтожит ли всю структуру фреймов или 
просто не сработает? Как правило, именно такие вопросы возникают при 
тестировании. А что произойдет, если открыть страницу в браузере, не под- 
держивающем структуры фреймов? Чтобы избежать последней проблемы, 
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на страницу потребуется включить сценарий детектирования фреймов, из-за 
чего приложение станет более громоздким, управлять кодом станет сложнее, 
кроме того, возрастет его общая сложность. 

С другой стороны, всплывающие окна можно заблокировать (что пользо- 
ватели часто и делают). Вообще, всплывающие окна не должны представлять 
проблем, если они явно инициируются пользователем. Однако они также мо- 
гут генерироваться браузером автоматически в ответ на событие оп1оа@ или 
опиоа4, причем часто не допускается открывать такие окна, так как они, 
как правило, используются как реклама. Некоторые пользователи блокиру- 
ют вообще все всплывающие окна — т.е. они никогда не получат результатов 
поиска, поскольку необходимое окно не откроется. 

При использовании всплывающих окон могут возникнуть и другие про- 
блемы, например, открытие дочернего окна под родительским, — в таком 
случае всплывающего окна просто не видно. Другая проблема встречается 
при выполнении некоторых действий в родительском окне. Если пользова- 
тель щелкает на ссылке или обновляет страницу, это действие может нару- 
шить связь потомка с родителем, т.е. разрушить сообщение между окнами. 
При обновлении страницы объект всплывающего окна уничтожается; ника- 
ким разумным способом переносить объект со страницы на страницу нельзя. 


Как видите, хотя использование фреймов и всплывающих окон решает 
проблемы, присущие традиционной отправке формы, эти решения могут по- 
рождать еще большие проблемы. Впрочем, для решения этих проблем мы 
можем использовать Ајах. Ајах обрабатывает связь с сервером независимо от 
страницы браузера, что позволяет воспроизводить анимацию и поддерживать 
состояние страницы; при этом не нужно заботиться о пользователях, которые 
блокируют всплывающие окна и закрывают окно, думая, что оно "зависло". 


12.1.3. "Живой" поиск с использованием Ајах и ХЅ51Т 


Функциональные возможности поискового элемента Меб-сайта можно улуч- 
шить, сделав поиск "живым"; именно так некоторые разработчики называют 
поиск с использованием Адах. Для выполнения такого поиска не требуется 
передавать на сервер всю страницу для обработки (как при традиционном 
поиске), а это означает, что можно поддерживать текущее состояние стра- 
ницы. Кроме того, без особых проблем можно запустить ЈауаЅсгірі и СІЕ- 
анимацию, поскольку результаты отображаются в браузере с помощью їп - 
пегНТМІ. или других методов РОМ. 

Допустим, что у нас есть средство поиска, инициирующее длительную 
транзакцию базы данных, в ходе которой страница выглядит недоступной. 
Используя Ајах, можно запустить анимацию в начале транзакции. Когда 
придет время выводить результаты, свойству С$$ аіѕрІау анимированного 
изображения можно присвоить значение попе, и анимация просто исчезнет. 
Можно также поместить анимированное изображение там, куда планирует- 
ся выводить результаты. После завершения транзакции изображение будет 
заменено результатами. В любом случае пользователь может использовать 
форму, в то время как объект ХМЕНИрВеаие$ обрабатывает данные сервера. 
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Рассмотрим Соо?е Марѕ — популярный пример того, как пользователь 
может работать с приложением, пока на сервере выполняется обработка дан- 
ных. Предположим, что мы отправляем серверу запрос о ресторанах на Глав- 
ной улице и при этом продолжаем работать с картой, пока сервер его обра- 
батывает. Нам не нужно ждать, как при обычной отправке формы. Процесс, 
запущенный на стороне сервера, возвращает результаты на страницу, где 
они отображаются для пользователя. Точно так же "живой" поиск позволя- 
ет пользователю взаимодействовать со страницей, пока сервер обрабатывает 
данные. Ход данного процесса показан на рис. 12.3. 

Использование Ајах для обработки поиска и длительных транзакций поз- 
воляет устранить проблемы, с которыми мы сталкивались в прошлом. Воз- 
можность "живого" поиска полезна не только при использовании поисковой 
машины, подобной Соозе или Үаһоо!, но и при потребности в менее масштаб- 
ном поиске. Например, с помощью "живого" поиска можно обратиться к таб- 
лице базы данных и извлечь информацию для одного из полей формы (на- 
пример, адреса), основываясь на том, что уже ввел пользователь, при этом не 
мешая пользователю в это время заполнять другие поля. Любую длительную 
транзакцию с сервером можно превратить в "живой" процесс, когда сервер по- 
следовательно и ненавязчиво обновляет информацию, предоставляемую кли- 
енту (см. главу 6). С помощью Ајах передачу данных можно сделать более 
эффективной и предоставлять результаты клиенту в более богатой среде. 


12. 1.4. Возврат результатов клиенту 


Когда сервер готов вернуть клиенту результат "живого" поиска, это можно 
сделать несколькими способами. Результаты можно отформатировать в виде 
ХМГ-кода, обычного текста или НТМТ-дескрипторов. В предыдущих приме- 
рах на сервере создавался ХМГ-документ. Затем на стороне клиента с по- 
мощью Јауа$Ѕсгірі-кода вызывались методы РОМ ХМГ, с помощью которых 
согласно последовательной обработке узлов ХМІ. формировалась таблица ре- 
зультатов. При таком подходе требовалось два цикла. Первый был задейство- 
ван при формировании ХМГ-докумепта на сервере, второй цикл применялся 
Для создания НТМТ-таблицы на стороне клиента. 
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Цикла РОМ ХМІ на стороне клиента можно избежать, если перед 
отправкой клиенту сформировать на сервере вместо ХМГ-файла таблицу 
НТМІ. Используя такую технологию, мы соединяем дескрипторы НТМЕ 
в большую строку, подобно тому, как мы формировали ХМІ-документ. Одна- 
ко теперь вместо дескрипторов ХМГ, применяются элементы таблицы. Строка 
НТМГ-кода возвращается клиенту, где ее можно присвоить свойству іппег- 
НІМІ, элемента. В данном случае использцется свойство геѕропѕе Техі объекта 
ХМЕНирКедие$, поскольку нам не требуется проходить по узлам. 

Недостаток описанной технологии заключается в том, что мы должны 
динамически обработать данные и создать таблицу (либо на стороне сервера, 
либо на стороне клиента). Если в будущем потребуется изменить формат таб- 
лицы, то в зависимости от сложности таблицы это может оказаться пробле- 
матичным. Добавление или удаление столбца может представлять проблему, 
поскольку мы должны будем изменить код внутри цикла. Кроме того, сле- 
дует учесть, что в нашей строке содержатся кавычки; необходимо убедиться, 
что при создании строки они были представлены правильными управляющи- 
ми последовательностями. Кроме того, если мы введем ЈауаЅсгірі-код в де- 
скриптор НТМГ, то получим еще больше двойных и одинарных кавычек, 
с которыми нужно что-то делать, — необходимо проверить, что все дескрип- 
торы правильно отформатированы и закрыты. Единственная возможность 
сделать все это — изучить текст после создания строки. 


Чтобы избежать данных проблем, мы можем использовать ХЗГТ. 
Применяя инфраструктуру Ајах, можно объединить ХЅІТ-файл с ХМГ- 
документом и отобразить результаты, не прибегая к использованию методов 
РОМ. Если разработчик знает ХЗГТ, но не является асом в использовании 
Јауа$сгірїі, данное решение может быть превосходным. 


Обсуждая поиск Ајах, следует отметить, что он не требует дообработки на 
сервере, следовательно, ОКТ, страницы не изменяется, чтобы соответствовать 
результатам поиска. Таким образом, создавая закладку на ОВГ, мы не по- 
лучим требуемых результатов поиска. В классических приложениях поиска, 
подобных Соозе, мы можем легко копировать ОКІ. со страницы, сформиро- 
ванной при поиске, вставить его в электронное письмо, и когда получатель 
щелкнет на такой ссылке, он увидит искомые результаты. Однако при Ајах- 
поиске такую возможность необходимо закодировать отдельно. Подробности 
этого процесса рассмотрены в разделе 12.5.4. 


12.2. Код клиентской части сценария 


Технология форматирования ХМГ-данных с использованием ХЗГТ довольно 
популярна, поскольку ХМГ-файл обладает структурой, легко поддающейся 
обработке. В предыдущих проектах (например, в приложении опережающего 
ввода, рассмотренном в главе 10) мы использовали ЈауаЅсгірі, ХМГ и РОМ 
для создания отображаемого НТМГ-кода. В данном примере для получения 
того же эффекта мы будем использовать ХЗГТ. 

ХЗГТ позволяет форматировать данные, формируя структуру НТМЕ 
в другом файле и объединяя его с документом ХМІ. Файл ХЅІТ отвечает 
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за все, кроме навигации по узлам ХМІ и построения таблиц, меню и НТМГ- 
структуры. Используя Ајах, мы можем извлечь статический или динамиче- 
ский файл ХМГ и статический или динамический файл ХІТ с сервера, объ- 
единив их на стороне клиента для создания НТМГ-доку мента. Всю работу 
с ХЅІТ можно выполнить и на стороне сервера, но мы будем рассматривать 
преобразования на стороне клиента. 


12.2.1. Настройка клиента 


В данном проекте мы рассмотрим поиск в телефонной книге по имени пользо- 
вателя. Для этого используется одно текстовое окно и одна кнопка Отправить. 
Форма поиска показана в листинге 12.1. 


Листинг 12.1. Форма клиентской части приложения 
<Ғогт пате= "Еокт1" ТО="Рогш1" 

опѕортіё= "Ста Мапрек () ; гебикп Ға1ѕе; "> 
// О Добавить обработчик опѕирті 

Маше: <іприё паме="азек" суре="Еехе"/> 
// О Вставить текстовое окно 

<1пруЕе буре= "ѕиртіё" папе= "Бепбеагсһ" 

уа1ае="беагсВ" /> 

// © Добавить кнопку отправки 

<рк/Хрг/> 

<аіу іа= "тгеѕи1ї5"> </аіу> 
// О Добавить элемент Яіу для результатов 
</Рогт> 








Для инициализации "живого" поиска к дескриптору Юг необходимо до- 
бавить обработчик событий. Обработчик событий опзабтИи О перехватыва- 
ет нажатие клавиши <Ещег>, если указатель мыши расположен в тексто- 
вом окне, а пользователь щелкает на кнопке Отправить. Данный обработчик 
событий вызывает функцию ОтаБМитбег(), инициирующую ХМІ.НќрКедиеѕі 
без возврата формы на страницу. (В реальной ситуации необходимо прове- 
рить, не отключил ли пользователь ЈауаЅсгірі. В таком случае форма будет 
отправляться на сервер, и для поддержки подобных пользователей можно 
использовать классическую форму поиска. Впрочем, в данном проекте мы 
такую возможность не рассматриваем.) 

Созданная нами форма является базовым вариантом, содержащим толь- 
ко обработчик событий, инициирующий ХМІ.НќрКедџиеѕі. Для сбора пользо- 
вательских критериев поиска к форме добавлены текстовое окно © и кнопка 
Отправить ©. Если мы хотим чего-то необычного, к текстовому окну можно 
еще добавить обработчик событий оп г, вызывающий функцию ОтаМит- 
Бег (); в таком случае поиск будет запущен тогда, когда текстовое окно пе- 
рестает находиться в фокусе В данном примере активизация поиска связана 
с обработчиком событий опзабти. 

Затем в документ добавляется элемент Піу О, в который будут выво- 
диться результаты поиска. Его можно разместить в любом месте станицы. 
в котором мы желаем видеть результаты. К Чу добавляется идентифика- 
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тор, поэтому мы можем ссылаться на этот элемент при добавлении результа- 
тов и СІЕ-анимации. Отметим, что использовать данный элемент для вывода 
результатов не обязательно. Их можно выводить в ячейку таблицы или да- 
же в элемент зрап. Фактически можно использовать любой элемент НТМГ, 
свойством іплпегНТМІ. которого мы можем манипулировать. Мы выбрали эле- 
мент іу потому, что это блочный элемент, содержащий разрыв строки перед 
началом и после конца элемента. Кроме того, іу занимает 100% доступной 
ширины браузера, из-за чего он больше подходит для выдачи пользователю 
больших таблиц результатов. 

Важно отметить, что обработчик событий опѕиртії должен возвращать 
значение ЃЁа1ѕе при выполнении обработчика. Это уведомляет браузер, что 
форму не нужно отправлять на сервер, что инициировало бы обновление всей 
страницы и прервало бы ЈауаЅсгірі-программу формы. Обработка возвраща- 
емого значения приведена в листинге 12.2. 


12.2.2. Инициализация процесса 


В данном примере мы используем на сервере два файла: документ ХМЕ 
и документ ХЅІ. Документ ХМІ. динамически создается РНР, когда этого 
требует клиент. РНР-код принимает то, что пользователь ввел на страницу, 
инициирует запрос к базе данных, а затем форматирует результаты в виде 
ХМГ-документа. Статический документ ХЅІ. превращает наш динамический 
ХМЕ-файл в документ НТМГ. Поскольку документ ХЅІ. статический, его не 
требуется создавать серверу в момент клиентского запроса, это можно сде- 
лать заблаговременно. 

Точно так же, как и в других проектах, рассмотренных в данной кни- 
ге, для инициализации объекта ХМИНИрКеаие мы используем отдельную 
функцию. Процесс сбора необходимой информации и вызов функции пред- 
ставлен в листинге 12.2. 


ин: ШШЩШШШШШИИШШ! 


// Создать функцию 
уаг игіХМІ='РћһопехХмі.рһр?а=' + доситепе. Еогт1.изег.уаше; 
// О Сформировать УВЕ ХМЕ 
уаг пг1Х$ [= • РБопе.х$1'; 
// © Сформировать ЧК ХЅІ. 
уаг пем те= аоситепіё. сгеаѓеЕіетепі('іте' ); 
// © Создать элемент изображения 
пем1 тз. зе Аг! БиЕе ('5гс', '1тазез /Іоааіпе.віғ) ; 
// О Установить источник 
ЧоситепЕ. се. Е |етепЕ ВУГА ("гези 11$"). аррепаСВ Па (пем|1т;); 
// © Добавить изображение на страницу 
ГоаахмЕх$ 1 ТРос{иХ МЕ, их $1, "гези $"); 
// 0 Начать загрузку 


Данная функция собирает информацию, требуемую для вызова сервера, 
устанавливает изображение, которое будет отображаться в процессе обра- 
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ботки, и вызывает сервер, который динамически создаст ответные данные, 
основываясь на отправленном значении строки запроса. Первым параметром 
функции ГоаахХМЕХГТОос () является ОКІ страницы РНР, которая генериру- 
ет ХМГ-документ, объединенный со строкой запроса, сформированной ссыл- 
кой на значений поля НТМГ-формы О. Второй параметр — это имя ХЅІТ- 
файла ©, используемого в преобразовании ХМГ-данных. Третий параметр, 
требуемый функцией ГоааХМЕХГТОос (), представляет собой идентификатор 
элемента у, в который следует помещать результаты поиска. Идентифика- 
тор — это строковое имя выходного элемента, а не ссылка на объект; в данном 
случае в качестве идентификатора используется строка "гези $". 

На следующем этапе мы с помощью методов РОМ добавляем на \Б- 
страницу изображение-индикатор. Создается элемент изображения © и уста- 
навливается атрибут источника изображения О. Этот созданный элемент 
добавляется к элементу іу с результатами ©. Таким образом, когда наша 
функция вызывается из обработчика событий опзабти формы, на страницу 
помещается файл изображения. Вообще, для пользователя важно создать ви- 
зуальную обратную связь — сообщение или изображение, — указывающую, 
что обработка находится в процессе. Благодаря этому пользователь не будет 
повторно щелкать на кнопке отправки форы, думая, что ничего не происхо- 
дит (помните, процесс Ајах — "незаметный"). 


Последний этап — это вызов функции Гоаіхмі Х517ТрЮос () ®, инициирую- 
щей процесс отправки информации на сервер. Функция ГогіхміХ517рес (), 
описанная в разделе 12.4, обрабатывает вызов объекта Сомеп оааег(), ко- 
торый запрашивает документы с сервера. Задавая в качестве параметра вы- 
ходное положение (а не кодируя значение жестко в функции Гоаїхмі Х517- 
"ос {)), мы можем многократно использовать данную функцию на одной 
странице, не требуя для разделения функциональных возможностей добавле- 
ния множества процедур или операторов іЁ. Следовательно, мы перенаправ- 
ляем результаты различных поисковых запросов на различные части страни- 
цы. Однако, прежде чем мы все это сделаем, давайте посмотрим, как создать 
на сервере документы ХМГ и ХЗГТ. 


12.3. Код серверной части приложения: РНР 


В данном разделе мы создадим для проекта динамический ХМГ-документ, 
используя РНР — популярный язык подготовки сценариев с открытым ис- 
ходным кодом (как вы знаете, инфраструктура Ајах совместима с любым 
серверным языком или платформой). ХМГ-документ генерируется динами- 
чески по набору результатов, полученному в ответ на запрос клиента к базе 
данных. Кроме того, мы покажем, как создать статический документ ХЅІТ, 
который расположен на сервере и извлекается каждый раз, когда запраши- 
вается динамический файл. Оба указанных документа возвращаются клиен- 
ту независимо, когда объект Сотщеп оа4ег запрашивается в двух отдель- 
ных запросах (листинг 12.7). ХЗГТ-код преобразовывает наш динамический 
ХМГ-документ на стороне клиента и создает НТМГ-таблицу, которая отоб- 
ражается пользователю. 
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12.3.1. Создание ХМЕ-документа 


Поскольку мы используем ХЗГТ, нам нужен структурированный ХМІ- 
документ, представляющий собой простую запись информации, чтобы ХЅІ- 
файл мог выполнить стандартное преобразование. В данном проекте мы со- 
здадим динамический ХМГ-файл, когда клиент затребует РНР-файл. 


Разработка ХМІ-структуры 


Прежде чем мы начнем создание ХМГ-файла, необходимо создать шаблон 
для него. Этот шаблон должен отражать структуру данных, возвращаемых 
при поиске. В выбранной формулировке задачи (телефонная книга) мы бу- 
дем возвращать название компании, имя контактного лица, страну и теле- 
фонный номер. В листинге 12.3 показан базовый ХМГ-шаблон, содержащий 
четыре поля. 


Листинг 12.3. Базовый ХМІ-файл 


<?хті уегѕіоп= "1.0" ?> 
<рһопебоок> 
<епіту> 
<сотрапу>Сотрапу Мате</сотрапу> 
<сопіасї> Сопѓасї Мате< /сопѓасі> 
<соџпіту> Соџопігу Мате</соџпігу> 
<рһопе> Рћопе М№Митбег</рһопе> 
</епіту> 
</рћһопебоок> 


Первым элементом является рһопебоок. Следующий — элемент епїгу, 
содержащий подэлементы со всеми деталями, которые связаны со всеми кон- 
тактными телефонами, найденными в запросе. Если у нас есть пять резуль- 
татов, в ХМГ-документе будет пять элементов епігу. Имя компании отобра- 
жается в элементе сотрапу. Кроме того, мы добавили имя контактного лица, 
название страны и номер телефона. Мы не ограничены только указанными 
полями; в зависимости от того, какую информацию необходимо отобразить, 
поля можно добавлять и удалять. 

Если результаты не найдены, то вместо отображения предупреждающе- 
го сообщения можно создать элемент, отображающий эту информацию для 
пользователя. ЗТО облегчит нам задачу возврата результата пользователю 
и не потребует дополнительного кода в клиентской части приложения. Код, 
приведенный в листинге 12.4, практически не отличается от кода из листин- 
га 12.3, но на этот раз мы вводим текст в элементы ХМГ, которые желаем 
показать пользователю, чтобы сообщить, что результаты не найдены. 


Листинг 12.4. Файл ХМЕ без результатов 
<?хті уетѕіоп= "1.0" ?> 
<рһопероок> 
<епітгу2> 
<сотрапу>Мъ№о Кези5</сотрапу> 
// О Вместо имени компании отображается "Мо Кеѕи15" 
<сош{асЁ> М/А < /соп{асЕ> 


490 Часть ІУ. АЈах в примерах 


// © Вместо оставшихся полей отображается "М/А" 
<соппеку>М/А< /соппЕхку> 
<рһопе>М/А</рһопе> 

</епігу> 
</рһопероок> 


С помощью данного кода мы отображаем пользователю единственную 
строку, сообщающую, что затребованная информация отсутствует. В де- 
скрипторе сотрапу О отображается информация, сообщающая, что результа- 
тов нет. В других дескрипторах 0 пользователю сообщается, что информации 
нет. Если мы не желаем отображать текст "М/А" ("не доступно"), можно доба- 
вить вместо него неразрывный пробел, &пб5р;, что позволит показать ячей- 
ки таблицы. Если бы мы не добавили вообще никакой информации, ячейки 
в таблице не появились бы. 


Как видите, формат ХМГ имеет очень простую структуру. Если бы дан- 
ный ХМГ-файл был статическим, пользователю было бы относительно про- 
сто добавить в файл нового абонента. Поскольку же он создается динамиче- 
ски, нам потребуется цикл, создающий ХМГ-документ по набору результатов. 


Создание динамического ХМЕ-документа 


Как всегда, мы создаем ХМГ-документ на сервере. Придерживаясь полити- 
ки использования в примерах различных серверных языков, серверный код 
дайной главы написан на РНР. Еще раз напомним, что инфраструктуру Ајах 
можно создать с помошью любого серверного языка, и мы будем описывать 
только сам принцип реализации серверного кода, не вдаваясь в детали. Итак, 
в листинге 12.5 показан код серверной части приложения. Код получает пара- 
метр строки запроса и генерирует множество результатов запроса базы дан- 
ных. Затем мы проходим по множеству результатов, создавая в ХМГ-файле 
согласно приведенному в листинге 12.4 шаблону элемент для каждого номера 
телефона, полученного в ответ на запрос. 


Листинг 12.5. Сценарий рпопехМмЕ.рйр: генерация ХМЕ-документа на сервере 
<?рһр 
// О Объявить тип МІМЕ 
феааег ("Сопіепі-ёуре: ёбехі/хт1"); 
есһо("<?хті уегѕіоп='1.0 ?>\п"); 
// © Соединиться с базой данных 
Ѕар = шузѕа1___соппесё ( "1оса1һоѕё", "ајах", "асііоп"); 
гпуѕа1_зе1есі ар ("ајах", ар); 
бтеза1Е = туѕа1_аоегу ("ЅЕІЕСТ * 
ЕВОМ Сопёасёѕ МИНЕКЕ СопёасеМапе 1іке '%". 
// © Заполнить запрос 
$ СЕТ['а'] ."%"',5а6); ?> 
<рһопероок»> 
=? 
// О Проверить результаты 
1Е ($пугом = шуз91_ЕебссЬ_аггау (Ѕгеѕи1ё)) { 
ао { 
// © Пройти по множеству результатов 
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?> 

<епту 11='<?=$гаугом['14'1]?>001'> 
<сотрапу><?=$тугом['сотрапућагае'|?></сотрапу> 
<сопѓасіх? = $ тугом ['сопіасіМате'[?> < /сопіасі> 
<соџпітуХ? = $ тугом ['соџпігу |]? > < /соититу> 
<рһопе><?=$ тугом [ 'рһопе' ] ?х/рһопе> 

соу? 

<) 


}үһШе (Фтугом - туѕд1 Ғеїсһ аггау{ $геѕиі)); 
}е15е{ 
> 


<епіту 11='001'> 
@ Показать пустой набор данных 
<сотрапу>Мо  Вези5</сотрапу> 
<сопіасі> М/А < /сопѓасі> 
<соџпіту> М/А </соипіту> 
<рһопе> М/А</рћопе> 
</епігу> 

а. 

< /рвопефоок> 


Чтобы данная динамическая генерация ХМГ-документа удалась, тип 
МІМЕ документа необходимо установить равным ќехі/хті О; если пропу- 
стить этот этап, ХЅ1.Т-преобразование может не произойти (особенно в бра- 
узерах Мо7Ша и Еігеѓох). 

Требуемые нам данные хранятся в таблице базы данных, и нам необ- 
ходимо просто выбрать нужные записи. В данном случае, для того чтобы 
максимально упростить работу, мы для непосредственного общения с базой 
данных используем встроенные функции МузЗОГ языка РНР. Мы соединя- 
емся с базой данных ајах, запущенной на локальном сервере базы данных, 
используя имя пользователя ајах и пароль асііоп ©. После этого создается 
строка ЗОГ-запроса; для заполнения оператора УНЕВЕ применяется параметр 
гедиеѕі, переданный в клиентском коде ©. 

Для более надежной реализации серверной части приложения рекоменду- 
ется не связываться напрямую с базой данных, как в приведенном коде, а ис- 
пользовать структуру, подобную ЮВ ПаќѓќаОЫјесі (Реаг) (см. главу 3). Впро- 
чем, текущая реализация очень проста, и читатели, желающие самостоятель- 
но протестировать рассматриваемый пример, могут ее легко настроить. 

Получив множество результатов, мы проверяем наличие в нем данных 
О, а затем либо последовательно проходим по нему © для создания записей 
телефонной книги, либо выдаем сообщение "Мо Веѕи1(5" 0. 


12.3.2. Создание документа ХІТ 


Используя ХЅІТ, наш ХМГ-файл с помощью пары строк кода можно пре- 
образовать в красивую таблицу НТМІ. ХЅІТ-документ разрешает сопостав- 
ление с шаблоном, если оно необходимо для отображения данных в любом 
требуемом формате. При сопоставлении с шаблоном для отображения дан- 
ных применяется структура-шаблон. При этом мы проходим по узлам дере- 


492 Часть М. Ајахв примерах 


ва источника, используя ХЅ17Т. ХЅ17-доку мент принимает структурирован- 
ный ХМГ-файл и преобразует его в формат, который удобен для просмот- 
ра, обновления и изменения. В нашем случае ХЗГТ-доку мент определяет- 
ся статически. 


Структура ХЗЕТ 


Х5ГТ-преобразование содержит правила для перевода исходного дерева в ко- 
нечное. Весь Х5ГТ-процесс заключается в сопоставлении со структурой- 
шаблоном. Когда элементы исходного дерева соответствуют заданной струк- 
туре, согласно шаблону документа создается конечное дерево. 


Структура конечного дерева не обязательно должна быть связана со 
структурой исходного. Следовательно, исходный ХМГ-файл можно преоб- 
разовать в любой требуемый формат. Использовать только табличное пред- 
ставление набора данных не обязательно. 

Х5ГТ-преобразование называется таблицей стилей, поскольку оно опреде- 
ляет стилевое оформление конечного дерева. Таблица стилей содержит пра- 
вила шаблона, состоящие из двух частей. Первая часть — это структура- 
шаблон, с которой сравниваются узлы исходного дерева. Обнаружив соот- 
ветствие, ХЗГТ-процессор задействует вторую часть — шаблон, содержащий 
дескрипторы для построения исходного дерева. 


Создание ХЗЕТ-документа 


Сформировать ХЗГТ-преобразование для данного проекта сравнительно про- 
сто. Поскольку мы собираемся получить таблицу, никакое необычное сопо- 
ставление с шаблоном не потребуется; мы просто последовательно пройдем по 
всем узлам-элементам исходного дерева. Ниже мы разработаем шаблон, фор- 
мирующий таблицу НТМГ, с четырьмя столбцами. Соответствующий ХЅІ7Т- 
файл для данного проекта показан в листинге 12.6. 


і Листинг 12.6. ХЗЕТ-файл 


<?хи1 уекѕіоп= "1.0" епсодіпад=>"150-8859-1"?> 


// О Установить версию ХМІ и кодировку 
<х51:5іу1Іеѕһееёб уегѕіоп= "1.0" 
хи1п$:х$1= 
// © Задать пространство имен ХЅІТ 
"ҺЕЄр: / /миим. м3 .ога/1999/Х5Ь/ТгапзЕогт" > 
// © Установить правила шаблона 
<х51:іепр1Ііаёе таёсһ="/"> 
// О Добавить элемент са Ле 
<сар1е іа= "#ар1е1"> 
// © Создать строку заголовка 
<Ех> 
<ЕП а1ісдп= "1е#ё" >Сотрапу</ёһ> 
<ЕҺ а1ісдп= "1еЁё" >Сопіасё</ёһ> 
<Еһ а1ісдп= "1е#ё" >Соџопёгу</ёһ> 
<ЕП а1ісп= "1еЁё" >РһҺопе</ЕһҺ> 
</Ех> 
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// 0 Последовательно пройти по элементам телефонной книги 
<х51:Ғог-еасһ 
ѕзе1есіё= "рһопероок/епігу"> 
// © Отформатировать выходные данные 
<Ет> 
<Еаххз1:уа1ае-оЕ ѕе1есі="сотрапу" /></ёа> 
<са><хѕ1і:уаіое-о# ѕе1есі= "сопёіасё" /></ёа> 
<іа><хѕ1:уа1іџое-о# зѕе1есі="соцџпёгу" /></ёа> 
<іа><хѕ1і:уа1џе-оЁ# ѕе1есё= "рһопе" /></+а> 
</Ех> 


</х51: Ғог-еасһ> 
</сар1іе> 
</х51:ёепр1Іаёе> 
</х51:5іу1еѕһееі> 


При создании ХЅІТ-преобразования необходимо указать кодировку и вер- 
сию ХМГ О, а также задать пространство имен ХЅ17Т ©. Пространство имен 
определяет правила и спецификации, которым должен соответствовать до- 
кумент. Элементы в пространстве имен ХМ! распознаются в исходном доку- 
менте, но не распознаются в документе результатов. Для определения всех 
наших элементов в пространстве имен ХЗГТ применяется префикс х$1. Да- 
лее молено установить правило шаблона — искать структуру / ©, которая 
соответствует всему документу. 

Теперь можно начинать создание шаблона таблицы, в которой отобража- 
ются наши результаты. Мы добавляем дескриптор 1а Бе О, сопоставляющий 
с таблицей идентификатор. После этого вводится строка заголовка табли- 
цы ©, вмещающая имена столбцов, указывающих пользователю, какая ин- 
формация содержится в таблице. 

Последовательно проходя по множеству узлов исходного дерева, мы по- 
лучаем остальные строки таблицы. В данном случае используется цикл 
Ғог-еасһ ©, в процессе обработки записей выдающий узлы, расположенные 
в рһопеђоок/епігу. 

Поскольку мы последовательно проходим по дереву документа, необхо- 
димо выбрать значения столбцов. Чтобы выбрать значения из узлов, исполь- 
зуется оператор уаше-оЁ в, извлекающий значение элемента ХМІ. и добав- 
ляющий его в выходной поток преобразования. Чтобы задать элемент ХМГ, 
текст которого мы желаем извлечь, используем с именем элемента атрибут 
ѕеІесї. Сформировав Х$ГТ-фаЙл и создав код для динамической генерации 
документа ХМІ, можно завершить создание ЈауаЅсгірі-кода и посмотреть, 
как объединение ХЅІТ-преобразования со структурированным ХМГ-файлом 
позволяет получить удобную для просмотра таблицу. 

На следующем этапе мы снова возвращаемся на сторону клиента, извле- 
кающего файлы, созданные только что с помощью НТТР-отклика. 
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12.4. Объединение документов Х51 и ХМЁ 


Возвращаясь на сторону клиента, мы сталкиваемся с задачей объедине- 
ния полученных с сервера документов Х5Г и ХМІ. При использовании 
ХЅІТ-преобразования следует помнить, что браузеры по-разному объединя- 
ют документы указанных типов. Следовательно, вначале необходимо про- 
верить, какой метод поддерживает браузер, чтобы загрузить и объединить 
два документа. 

Как и ранее, мы используем объект Сощеп Гоааег (см. главу 3). Данный 
объект содержится во внешнем ЈауаЅсгірі-файле пеї.јѕ. Этот файл опреде- 
ляет, как отправлять информацию на сервер, скрывая все отличия работы 
браузеров за удобным интерфейсным объектом. 


<ѕсгірі їуре="іехі/јауаѕсгірі" ѕгс="пеї.јѕ"Х/ѕсгірі> 


Теперь можно начинать процесс получения файлов с сервера и объеди- 
нения их на стороне клиента. В листинге 12.7 приведена функция ШоааХМ- 
ГХЅІ7Трос (), вызываемая из функции СгаБМитбег(), представленной в ли- 
стинге 12.2. Функция СгаБЬМитбег() передает значения ОКГ, генерирующего 
ХМГ-данные, Х5Г-файл и идентификатор элемента, в который должны вы- 
водиться данные. Имея три указанных значения, мы можем загрузить два 
документа и объединить их после завершения загрузки. Как показано в ли- 
стинге 12.7, для объединения файлов ХМГ и ХЅІ. потребуется специальный 
код. предусматривающий возможность использования различных браузеров. 








ЛИСТИНГ 12.7. ФУНКЦИЯ Горам. ЯНННННШНВНН 


// О Объявить глобальные переменные 


уаг хтю1рос; 

уаг хѕ1рос; 

уар орјОоёриё; 

// © Обнулить переменные 

Ғопсііоп Іоаахміхѕі Трос (игіхмі,ог1хЅі,е1емепіёїр) { 
хтірос=пи11; 
хѕ1рос=пи11; 

// & Определить выходной элемент 
орјОоіриё = аосомепре.чееЕ1ететЕВута{ 
е1етепЕ1а); 

// О Загрузить файлы ХМЬ и хЅ1 
рем пеѓі .СопіепіІоааег (ах1ХМЬ , опХхХМЬГоаа); 
рем пее.СопеепеГоааек (их1Х$Т, опх$1Шоаа) ; 























} 

// 0 Обработать ХМІ-докуыеит 

Ғопсёіоп опХМШоаа() { 
хп1ірос=ёһіѕ.гед.геѕропѕехмц; 
аохѕіІТ(); 

} 

// 0 Обработать ХЗГ-документ 

ГипсНоп опХЅ1.1оаа(){ 
х$1Рос={11$.геа.гезропзехХ МГ; 
аохѕІТ(); 

} 


// О Проверить, загрузились ли документы 
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Ғопсёіоп аохѕІТт{) { 
ТЕ (хм1рос==пи11 || хѕ1рос==пи11) { геіџгп; } 
// © Преобразовать ХМІ-докуыент 
1Е (иіпаоу.Асёіуехорјесі) { 
орјоиіриї . іппекнтТмі=хтм1 рос. ёгапѕ Еогпћоаде (хѕ1рос); 


} 

е1зе{ 
уаг хз1ЕРгосеззог = пем Х5ЬТРгосеззог(); 
хѕ1ЕРгосеѕѕог.іпрогёѕёу1еѕћееі (хѕ1рос); 
уаг Ёгадтепі =х5ѕ51ЕРгосеѕѕог.ігапѕ ҒогпТоЕгастепё ( 

хп1рос,аосимепі) ; 

орјооёриё.іппегнНтмі_ = ""; 
орјОоіриё .аррепасћі1а (Ёсадтепе) ; 


ыы —_________—_____:________2______________ ББ 

Чтобы упростить клиентскую часть сценария, необходимо объявить три 
глобальные переменные О, которые будут вмещать три различных объекта. 
Первые две переменные, хос и х1 Юос, предназначены для хранения фай- 
лов ХМІ. и ХЅІ, возвращаемых с сервера. Третья переменная, оБјОшіриі, 
содержит объектную ссылку на элемент РОМ, в который будут выводить- 
ся результаты. Определив указанные переменные, можно создать функцию 
Гоа4ХМЕХ$ТОос (), вызываемую из функции ОтаМитбег (). 

Поскольку мы загружаем два документа, нужно определить момент, ко- 
гда оба они будут доступны. Для этого мы проверим, получили ли уже пе- 
ременные хт[ос и хѕ1Юос соотнесенные с ними документы. Прежде чем 
начать, мы должны присвоить обеим этим переменным значение пиП @. 
Это гарантирует, что переменные не содержат никаких данных, даже если 
функция запускается на странице несколько раз. Чтобы задать объект для 
вывода результата объединения, из вызова функции берется идентификатор 
переданного элемента ©. Далее мы дважды вызываем функцию Соще- 
Гоайег — один раз для документа ХМГ и один раз для документа ХЗГ. О. 
При каждом вызове функция Сощеп оа4ег получает ОВГ, а затем вызы- 
вает другую функцию для загрузки документов. Функция опХМШЏоаао © 
загружает возвращаемый ХМІ-документ в глобальную переменную хи!Оос, 
а затем вызывает функцию ЯоХЅІТ () для последующей обработки. Функция 
опх5 Г оадаО © загружает ХЅІ.-документ в глобальную переменную х$ос 
и также вызывает функцию ЯоХЅІТ (). 

Обработка не может продолжаться, пока не будут загружены оба доку- 
мента, а мы никак не можем определить, который из них будет загружен 
первым, поэтому функция аЯоХЅІТ () вначале проверяет, загружены ли оба 
документа. Она вызывается дважды — после загрузки документа ХМ, и до- 
кумента ХЅІ. При первом вызове этой функции одна из глобальных пере- 
менных все еще имеет значение пи, поэтому мы завершаем выполнение 
функции 0. При следующем вызове выполнение функции не завершается, 
поскольку ни одна переменная не имеет значения пиП. Теперь загружены 
оба документа, и можно выполнять Х5Г.Т-преобразование ©. 
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После загрузки обоих документов необходимо преобразовать ХМГ- 
документ с применением ХЅІТ. Изучая код, приведенный в листинге 12.7. 
видим, что требуемого можно достичь двумя различными способами в зави- 
симости от браузера. Іпѓегпеї Ехр]огег использует функцию їгапѕ# опиМосде {), 
тогда как Мо7Ша — объект ХЗ ТРгосеѕѕог. В связи с этим ниже мы подробно 
рассмотрим две различные реализации преобразования. 


12.4.1. Совместимость с браузером М/сгозой Іпіетеї Ехр/огег 


Браузер Іһѓегпеї ЕхрІогег позволяет преобразовать ХМГ-документ согласно 
Х5ГТ-доку менту с помощью всего пары строк кода. В нашем проекте ис- 
пользуется метод їігапѕ# опиМоде (), принимающий документы ХМГ и ХЅІТ 
и объединяющий их. 


1Е (хіпаоу.АсеіуеХоОрјесё) { 
орјОоіриі .іппегнтмі =хт1 рос .ёкгапѕ Ёогтюћоае (хѕ1рос); } 

Вначале мы определяем, поддерживает ли браузер метод {гапз- 
Г огтКоде (). Для этого необходимо проверить, поддерживает ли браузер объ- 
ект АсіуеХ. Если объект поддерживается, к глобальной переменной, содер- 
жащей ХМІ-данные, применяется метод їігапѕѓогт Моӣе(), передавая этой 
переменной глобальную переменную, содержащую Х5ЗГТ-данные. Резуль- 
тат данного преобразования добавляется к свойству шпегНТМЕ, выходного 
элемента, который теперь будет содержать отформатированные результа- 
ты поиска. 

Итак, мы разобрались, как форматировать результаты для Пиегпе{ Ех- 
рІогег. Теперь сделаем то же для браузеров, совместимых с Мо7Ша. 


12.4.2. Совместимость с браузерами Мо2Иа 


Для браузеров Мо7Ша необходимо использовать объект ХЅ1.ТРгосеѕѕог, поз- 
воляющий объединять документы ХМГ и ХЅІ. Обратите внимание на то, 
что хотя браузеры Орега и Ѕаѓагі поддерживают объект ХМІ.НќрКедиеѕі, они 
не поддерживают объект Х5ГТРгосеззог, и в них невозможен запуск рас- 
сматриваемого проекта без поддержки с сервера (подробнее данный вопрос 
рассмотрен в разделе 12.5.2). В листинге 12.8 реализовано преобразование 
ХМІ-документа с использованием ХЗГТ и отображение отформатированно- 
го множества результатов. 


Листинг 12.8. Вызов ХЅІТ для браузеров Мога 


е1зе{ 
уар хз1ЕРгосеззог = пем ХЅІТРгосеѕѕог (); 
х$1ЕРгосеззок .1трогЕзсу1езвеее (хѕ1рос); 
уаг Ғгасдпепі^хѕ1ёРгосеѕѕог.ігапѕ ҒогттоЕгастпепі (хи1Пос , аосомепй®) Т 
оруОоёриё .іппегнНтмі = ""; 
орјОоіриі .аррепасћһі1а (#кастепі) ; 


Ут 
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Е Еа ну 
| Манин ве засл | 
| 
| Сотрару Сопки Созлыгу Рһопе 
Ајах бе Јово. Ма Мећомапіз +31.Ххх-хкхх 
| Ајах де Мы, Тош Мацецаи4 а +31-ххх-хххх 
рис. 12.4. Отображение результатов | Алдіғез Тејашютійез, Аз Сесе +30-500-8С 


"живого" поиска Ајах - бнаа 


Прежде всего необходимо инициализировать объект ХЅІТРгосеѕѕог, поз- 
воляющий объединять файлы ХМГ и ХЗГ. С помощью метода ітрогі- 
ЅїуІеѕһееї объекта ХЗГТРгосеззог можно импортировать файл ХЅІ, что 
позволит нам в дальнейшем присоединить его к файлу ХМГ. Загрузив в про- 
цессор файл ХЅІ, остается преобразовать ХМГ-документ. Для этого снова 
используется объект ХЅІ.ТРгосеѕѕог, на этот раз с новым методом {гапз- 
ҒогтТоЕгартепіО. Метод ќгапѕѓогтТоЕгавтеһі () принимает файл ХМГ 
и объединяет его с ХЭГ, возвращая отформатированное конечное дерево. 

Для замещения содержимого элемента геѕи1ї свойству іппегНТМІ. при- 
сваивается значение, равное пустой строке. Таким образом, со страницы уда- 
ляется анимация ожидания. Наконец, берется результат, полученный от ме- 
тода ігапѕѓогтТоЕгавтепї (), и добавляется к элементу гези(. Теперь поль- 
зователь видит отформатированные результаты поиска. 

В приведенном коде было введено несколько новых концепций, в том чис- 
ле объект ХЗГТРгосез$5ог, позволяющий сочетать произвольные файлы ХМІ. 
и ХЅ1. Для объединения подобных документов в браузерах Мо7Ша и Еге- 
Ююх требуется использовать больше методов РОМ. В Пиегпеё Ехр]огег для 
преобразования документа ХМІ, нужна единственная строка кода. Оконча- 
тельные итоги обоих преобразований идентичны: отображаемые результаты 
поиска отформатированы согласно данным Х$ЗГ-файла. 

Завершив разработку клиентской части сценария, можно сохранить до- 
кументы и протестировать полученное приложение "живого" поиска. Введи- 
те в текстовое окно какой-либо текст и щелкните на кнопке ЗеагсВ ("по- 
иск"). Результаты должны появиться в табличной форме, подобной показан- 
ной на рис. 12.4. 

Как видите, мы создали ХЅ1 -документ и можем успешно производить по- 
иск. Таблица, показанная на рис. 12.4, выглядит довольно скучно, поскольку 
не содержит форматирования. Это означает, что нам осталось разработать 
стилевое оформление таблицы результатов, чтобы сделать ее более нагляд- 
ной. Для этого нам потребуются каскадные таблицы стилей (Сазса ше ЅїуІе 
Ѕһееїіѕ-С858). 


12.5. Последние штрихи 


Объединив документы ХМІ. и ХЅІ. для получения результатов, мы долж- 
ны улучшить стиль отображения результатов поиска, применив к соответ- 
ствующим элементам правила С5$. Стилевое оформление элементов облег- 
чает восприятие результатов пользователями. Первое, что нужно сделать для 
улучшения удобства пользователя, — это применить правила С$$ к элемен- 
там НТМІ. 
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12.5.1. Применение каскадных таблиц стилей 


О каскадных таблицах стилей (Сазсад ше Зе Ѕһееіѕ — С$5) речь шла в гла- 
ве 2. Благодаря им результаты будут выглядеть профессионально при ми- 
нимальных усилиях с нашей стороны, при этом представление результатов 
будет отделено от структуры документа и логики преобразования. Если вдруг 
когда-нибудь менеджера или клиента начнут раздражать выбранные цвета, 
соответствующие изменения можно будет выполнить легко и быстро. Если 
мы участвуем в большом проекте с отдельными командами дизайна и коди- 
рования, С8$5 поможет нам не мешать друг другу. Таблицу стилей можно 
привязать к поисковой странице как внешний файл, также ее код можно 
внедрить непосредственно на страницу. Использование внешнего файла С$5$ 
предпочтительнее, поскольку он кэшируется браузером и уменьшает время 
загрузки страницы в будущем. Используемые нами правила таблицы стилей 
показаны в листинге 12.9. 


| | [Листинг 12.9. Каскадная таблица стилей 


//О Стиль таблицы 
сар1е { 
рогӣег: 1рх ѕо11іа Ю1аск; 
рогаег-со11арѕе: со11арѕе; 
міаєһ: 508%; 
} 
// © Стиль ячеек таблицы 
ЕВ, Еаї 
рогаег: 1рх ѕо1іа БЛаск; 
райаіпд: Зрх; 
міаєһ: 25%; 
І 
// @ Стиль ячеек заголовка 
Ем 


9 


раскагоопа-со1ог: З#АОАОАО0; 


Первое правило С$8 применяется к дескриптору {а ]е О. В данном слу- 
чае мы хотим, чтобы рамка вокруг таблицы формировалась сплошной линией 
толщиной один пиксель. Свойству Бог4ег-соПарзе таблицы присваивается 
значение соПарзе. Такая модель С5$, по сути, позволяет унифицировать 
свойства таблицы. Границы имеют равную толщину — границы соседних яче- 
ек считаются общими, так что между ячейками не возникает границ двойной 
или тройной толщины. Последним изменением дескриптора {аб ]е является 
присвоение значения свойству жіаіһ. Поскольку столбцов не много, шири- 
на таблицы устанавливается равной 50% ширины содержащего ее элемента 
Чу. Все столбцы таблицы будут содержать небольшой объем информации, 
поэтому большая разрядка в данном случае не нужна. 

Определив стиль элемента {а Ме, необходимо отформатировать тело и за- 
головок таблицы ©. Точно так же, как и для всей таблицы, рамку для тела и 
заголовка мы задаем в виде сплошной линии толщиной один пиксель. Кроме 
того, добавим небольшое заполнение, чтобы текст не "слипался" с граница- 
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лани | 


де ]с009, 


ме! Мећепапдз |+31-ххххх 


де МШ, Том |Мећейапі» |+31-хюежххх 


! Тојагоовриіез, 
Рис. 12.5. Результаты "живого" поиска Ајах Алие = В ака: +30-500.ВС 








с примененными к элементам стилями С55 


ми ячейки. Значение свойства У\1А ячеек мы задаем равным 25% ширины 
таблицы, чтобы все четыре столбца имели одинаковый размер 

Последний этап стилевого оформления таблицы с помощью правил С95 — 
изменение свойства ячеек заголовка, чтобы визуально отделить их от ячеек 
тела таблицы. Мы обращаемся к ячейке заголовка © и изменяем цвет ее 
фона (ФасКегоипа-со]ог) на оттенок серого. Здесь же можно изменить и 
другие свойства — ЃЁопі-уеіоһі, со1ог и т.д. Завершив разработку свойств 
таблицы стилей, мы записываем документ и снова запускаем поиск. Теперь 
отформатированная таблица выглядит так, как показано на рис. 12.5. 

Видно, что таблица имеет структуру, полученную путем применения 
свойств С55 к элементам таблицы. Если в таблице стилей требуется внедрить 
больше функциональных возможностей, можно добавить ссылки на файл 
ХЗГТ и получить еще более гибкую структуру. С8$8 позволяет настраивать 
таблицу любым удобным способом, однако поиск можно улучшить и по дру- 
гим направлениям. 


12.5.2. Улучшение поиска 


Одним из достоинств Ајах является легкость передачи информации на сер- 
вер. Данный проект — это всего лишь упражнение по реализации поиска с ис- 
пользованием Ајах и применением ХЗГТ для отображения таблицы резуль- 
татов при минимальных усилиях. "Живой" поиск можно совершенствовать 
до бесконечности. Рассмотрим, например, несколько путей его улучшения. 


Включение новых возможностей 


В созданной нами форме для выполнения поиска применяется единственное 
текстовое окно и одна кнопка отправки. Однако мы вполне можем задейство- 
вать в поиске множество параметров, например, дополнительно учитывать 
при поиске имя контактного лица или страны. Все, что для этого требует- 
ся, — послать на сервер чуть больше параметров и приказать серверному коду 
обработать их. Сказанное означает, что пользователи могут искать информа- 
цию и с помощью альтернативных вариантов, что сделает форму полезнее. 

В данный сценарий можно добавить и другие возможности Ајах, напри- 
мер, реализовав двойные связанные комбинации (см. главу 9), что позволит 
отсеять результаты, отображаемые для пользователя. Кроме того, можно ре- 
ализовать технологии, описанные в главе 10, введя в текущий сценарий воз- 
можности опережающего ввода. 
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Поддержка браузерами Орега и Ѕаѓагі 


Напомним, что браузеры Орега и Ѕаѓагі не поддерживают ни метод {гапз- 
ЮгтМо4деО, ни объект ХЗГТРгосез$зог. Обеспечить требуемую поддержку 
можно двумя способами. Первый вариант — использовать Адах для отправки 
файлов на сервер, где код серверной части приложения объединит докумен- 
ты ХМГ и ХЅІ. Затем результат преобразования можно извлечь с помощью 
одного объекта Сопіепї Гоайег, а не двух независимых элементов — данных 
ХМЕ и таблицы стилей ХЅІТ. Такое решение будет не самым лучшим, по- 
скольку для выполнения преобразования клиенту дважды придется обра- 
щаться к серверу. 


Второй вариант — с помощью Ајах отправить на сервер всю страницу. 
В таком случае сервер обработает полученный материал и объединит доку- 
менты ХМГ и ХЅІ. Такой подход лучше, поскольку он позволяет исполь- 
зовать поиск всем пользователям. Если кто-то работает со старой версией 
браузера, не поддерживающей объект ХМЕНИрВеацез, это не будет препят- 
ствовать использованию формы. Если же мы будем полагаться только на 
технологию Ајах, пользователи, которым она не доступна, не смогут извлечь 
два требуемых файла для обработки. Поэтому мы примем второй подход, в 
котором поддержка Ајах не является необходимым условием. Чтобы доба- 
вить требуемые функциональные возможности, понадобится в двух местах 
изменить функцию ШоааХМЕХЗГТОос {), как показано в листинге 12.10. Во- 
первых, нужно переписать первый оператор Ш, добавив проверку наличия 
процессора ХЅІТ. Во-вторых, следует добавить вариант е15е, инициирую- 
щий отправку формы на сервер. 


Листинг 12.10. Функция ГоадХМЕХЗЕТВос О поддержкой Орега и Ѕаїагі 


ЕорсЕ1оп ІоаахміхѕЅ1Трос (иг1іхмі,, ир1хЅі,е1еюмепёр) { 
уаг геахмц; уаг геахоц; 
1Е {умі паоу. ХМІНЕсрВеацџеѕё && млпаом.х$5ЬТРкосеззок) { 








//... дао Мохі11а с1іепі ХЅІТ 
} еіѕе 1ЁЕ (иіпаоу.АсёіуехХорјесі) { 
//... до Іпіегпеі ЕхрІогег с1іепі ХІТ 
} е1іѕе{ доситепі .Еогт1 .опѕиртіё = #ипсіёіоп () {хебагп ёгие; ( 


аӢосотепі .ЕКогкм1 . забм1 (); } 





В листинге 12.10 мы переместили обработчик событий опзибшИи внутрь 
ветки е1ѕе условной проверки, чтобы можно было отправить форму на сер- 
вер. Если бы мы не убрали обработчик событий опзибти, форму невозможно 
было бы вернуть на сервер. 

Далее серверная часть приложения должна выполнить всю необходимую 
обработку и поместить элемент в форму. В результате мы получим возмож- 
ность быстрого отклика для тех пользователей, которые могут самостоя- 
тельно объединить ХЅІТ с ЈауаЅсгірі, при этом мы не отказываемся от тех 
пользователей, браузеры которых не поддерживают Ајах или ХЗГТРгосеззог. 
Помните, что Ајах позволяет не визуализировать повторно всю страницу, те- 
ряя при этом ее текущее состояние. Благодаря Ајах мы можем не думать 


т 
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о прокрутке до нужного места, заполнении полей формы и т.д. Поскольку 
мы к тому же сумели решить проблему поддержки Орета и Зап, в вопросе 
целесообразности использования ХЗГТ-преобр азов алия у нас стало меньше 
еще одним аргументом против. 


12.5.3. Использовать ли ХЅЇІТ 


В процессе работы над проектом вполне может возникнуть ситуация, когда 
вам придется отстаивать перед руководством или членами команды желание 
использовать ХЗГТ. Возможно, вам зададут такой вопрос: "Вы динамиче- 
ски генерируете на сервере файл ХМГ, так почему же нельзя точно так же 
сгенерировать таблицу результатов?" 

По сути, мнение наших коллег-разработчиков заключается в том, что для 
отображения результатов пользователю мы делаем,больше работы, чем тре- 
буется. Действительно, когда браузер визуализирует таблицу результатов, 
на УеБ-странице должна быть выполнена дополнительная обработка. Вме- 
сто одного файла, код Ајах загружает два, которые впоследствии необходи- 
мо объединить. 


Мы без проблем могли бы сгенерировать таблицу на сервере. Таблица ре- 
зультатов отображалась бы с использованием свойства геѕропѕеТехі объекта 
ХМЕНирКеаце$ и возвращенного значения к НТМГ-элементу. Данный метод 
нормальный и жизнеспособный, причем содержит на один этап меньше, чем 
предложенный выше. 


Однако при построении НТМГ-таблицы на стороне сервера следует по- 
думать еще и о тех усилиях, которые придется приложить, если потребуется 
изменить что-то. Как обсуждалось ранее в данной главе, при построении 
таблицы разработчики сталкиваются с множеством проблем. Нужно поду- 
мать о кавычках, синтаксисе дескрипторов, атрибутах, обработчиках собы- 
тий и о многом другом. Если пользователю потребуется изменить порядок 
столбцов в таблице результатов, нам придется перекодировать очень много 
фрагментов приложения. 


Используя ХЅІТ, мы выносим построение таблицы из кода серверной ча- 
сти приложения. Сервер может построить упрощенную версию таблицы ре- 
зультатов в формате ХМГ. Этот формат достаточно понятен и позволяет 
легко выявлять ошибки. Кроме того, ХЅІТ-файл выглядит подобно НТМГ- 
странице. Нам не придется подсчитывать кавычки или выполнять поиск 
в строке, чтобы определить, имеется ли в ней дескриптор. Используя ХЗГТ, 
мы можем просто посмотреть и сказать, что все правильно. 


Кроме того, мы можем воспользоваться созданным У! -дизайнером шаб- 
лоном таблицы и поместить его в файл ХІТ. Если нам когда-либо придется 
что-то изменить (например, переставить столбцы), все наши действия све- 
дутся к операциям "вырезать-вставить". Нам не придется морочить себе го- 
лову и проверять, нормально ли расставлены дескрипторы после модифика- 
ции. Используя ХЅІ7Т, мы убираем из динамического кода обработку НТМГ- 
страницы. Благодаря этому внешний вид таблицы результатов можно будет 
изменить без особых проблем. 
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Наконец, использование Јауа8сгірї позволяет очень легко сделать то, что 
при выполнении преобразования на сервере было бы просто невозможным. 


• Извлекать различные документы ХЗГ, основываясь на теме, размерах 
экрана, языке и т.д. 
• Извлекать документы ХМЕГ и ХЅІ. без помощи сервера. 


• Изучать журнал (Іов е) ХМГ на локальном компьютере, не имея кон- 
троля над структурой документа ХМГ. 


Наверное, вы уже поняли, что Ајах может существенно облегчить выпол- 
нение ваших повседневных задач. 

Тем не менее мы не рассмотрели еще один вопрос, связанный с "живым" 
поиском Ајах: как позволить пользователю сформировать закладку на стра- 
ницу результатов. 


12.5.4. Решение проблемы закладок 


При поиске с использованием Адах мы сталкиваемся с проблемой: создать за- 
кладку на страницу традиционным способом не получается. (Та же проблема 
возникает при использовании фреймов и всплывающих окон.) Закладки поз- 
воляют возвращаться в дальнейшем к результатам поиска без ввода запро- 
са; кроме того, закладки удобно отправлять друзьям и коллегам с помощью 
электронной почты или приложений обмена мгновенными сообщениями. По- 
скольку поиск Адах не требует дообработки на сервере, в процессе поиска мы 
не изменяем ОКГ страницы, следовательно, сделав закладку на этот ОКІ, 
мы просто отметим отправной пункт приложения, а не результаты, которые 
предполагалось сохранить. 

Легким решением данной проблемы является добавление линии поведе- 
ния, позволяющей запоминать результаты поиска. Мы можем создать дина- 
мическую строку, которая будет использоваться для создания динамической 
закладки. Эта динамическая строка будет содержать прямую ссылку на ту 
страницу, на которой она находится , и включать параметр строки запроса 
с искомым значением. Таким образом, записывая данную строку на страницу 
для формирования ссылки, пользователь может либо создать на нее закладку 
(щелкнув правой кнопкой мыши на ссылке), либо скопировать ссылку (при 
этом будут автоматически записаны условия поиска). Возможность считыва- 
ния значения строки запроса мы опишем после того, как разберемся с созда- 
нием ссылки. 

Ссылку можно создать при выполнении функции ОтаМитбег (). В наш 
документ добавляется еще один элемент ѕрап, в который мы поместим ссыл- 
ку. В данном случае элемент ѕрап имеет идентификатор ѕрапЅауе, как по- 
казано в листинге 12.11 (вызов метода ге етеп{Ву!а). Отметим, что эле- 
мент ѕрап можно разместить в любом месте страницы (что достаточно удобно 
Для пользователя). 
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Листинг 12.11. Функция ОгабМитбег, содержащая ссылку-закладку 
Еорсе1оп СгаБ\оифег () { 
үаг ѕігііпк = "<а ҺгеЁ`" + 
1осабіоп.һгеЁ.ѕр11("?") [0] + "?а=" + 
аӢосотепё -Еогті.џѕег.уаїіџое + '">бауе беагсһ</а>"; 
дӢосотепё .деіЕ1етепЕВуІа ("зрапбауе") .іппегнНтмі = зіёгііпк; 





Код, приведенный в листинге 12.11, генерирует динамическую ссылку на 
текущую страницу поиска и добавляет параметр строки запроса 4 со значени- 
ем, указанным в текстовом окне. Именно параметр строки запроса позволит 
нам в будущем "вспомнить" произведенный поиск. Далее эта новая ссылка 
добавляется в элемент ѕрап на странице, чтобы пользователь мог выбрать 
ссылку и отправить ее другим пользователям или создать закладку на нее, 
щелкнув правой кнопкой мыши на ссылке и добавив ее в папку Избранное. 
В листинге 12.12 мы получаем значение строки запроса из ОВГ во время 
загрузки страницы, а затем выполняем поиск автоматически, чтобы отобра- 
зить результаты. 


Листинг 12.12. Получение значения строки запроса и выполнение поиска 


уміпаом.опіоаа = ТипсНоп() { 
уаг 5105 = уіпӣож.Іосаїіоп.ѕеагсһ; 
уаг 1110$ = $105.ш4ехОЁ"а="); 
1#(101085 != -1}{ 
доситепЕ. Еоги[.изег.уаше = 51708 .50651гіпе(іпі08+2); 
СтабМоитбег(); 


} щ 





К объекту окна мы добавили обработчик события опіоаа, который вы- 
полнит функцию при загрузке страницы. Проверим, содержится ли значе- 
ние строки запроса в ОКІ; если да, то мы получаем значение. Значение 
строки запроса помещается в текстовом окне, а затем автоматически вы- 
полняется функция СтаБМитбег (), формирующая таблицу результатов. До- 
бавление указанного кода позволяет создавать закладки на страницы поиска 
и получать результаты поиска на странице без ввода условий поиска вруч- 
ную. Благодаря этому наш проект Ајах становится еще более дружественным 
к пользователю. 


12.6. Реструктуризация 


Пришло время вывести "живой" поиск ХЗГТ на следующий уровень, 
используя (вы догадались!) компонентное представление. Мы должны 
взять полученный стильный сценарий и реструктуризировать в объектно- 
ориентированный повторно используемый компонент. Начнем с ХЫЛ- 
обработки на стороне клиента. Отметим, что данный пример отличается от 
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всех остальных Б ТОМ смысле, что все вопросы, связанные с обработкой ответа 
методами РОМ. он решает с помощью ХЗГТ. Ну что ж, начнем! Мы должны 
так изменить ХЅІТ-обработку, чтобы ее можно было использовать и с други- 
ми компонентами (а не только с "живым" поиском). Сделав это, мы сосредо- 
точимся на такой реструктуризации "живого" поиска, чтобы его можно было 
быстро добавить на любую страницу как удобный настраиваемый компонент. 


12.6.1. Объект Х51 ТНеІірег 


Нам пришлось много потрудиться, чтобы выяснить все подробности ХЗГЛ- 
обработки на стороне клиента. Например, мы узнали, что для выполне- 
ния указанного преобразования можно задействовать абсолютно разные АРТ, 
в зависимости от того, на какие браузеры мы рассчитываем — Пиегпее Ех- 
рІогег или Мо7Ша. Кроме того, каждый АРІ имеет собственные индивидуаль- 
ные особенности. Поэтому было бы стыдно не инкапсулировать эти тяжким 
трудом полученные знания, чтобы коллегам, которые пойдут вслед за на- 
ми, не пришлось с таким же трудом разбираться с кажущимися простыми 
ХГТ-преобразованиями. Следовательно, создадим объект ХЗГТНефрег, ин- 
капсулирующий все вопросы, касающиеся ХЗГТ. 


Вся ХЅІТ-обработка обычно требует два источника информации: преоб- 
разовываемого ХМГ-документа и ХЅІ -документа, содержащего правила пре- 
образования. Учитывая это, можем написать конструктор вспомогательного 
объекта, с помощью которого сохраним это состояние. 


Ғопсёіоп Х5ЬТНе]1рек( хи1Т9ВЬ, хѕ1і0ві ) { 


Е61$.хи1ТОВЬ = хм1і0вц; 
Е51$.хе1оВЬ хеовг; 








} 

Пожалуй, этот конструктор является самым простым из всех, использо- 
ванных в данной книге. Он просто записывает ОКІ. упомянутых выше до- 
кументов: документа с ХМГ-данными и документа с ХЅІТ-преобразованием. 
Однако, прежде чем мы уверимся в совершенной простоте всей предстоя- 
щей работы, нужно придумать АРІ, поддерживающий постепенное ухудше- 
ние условий. Нам нужно, чтобы сценарий выполнял ХЅІТ-обработку, только 
если браузер ее поддерживает. Таким образом, если мы собираемся написать 
объект-"помощник", было бы неплохо, чтобы его АРІ сообщал клиенту, может 
ли он выполнять ХЗГТ-преобразования. Однако создание дополнительного 
объекта для выяснения, поддерживает ли браузер ХЗГТ, — не очень хоро- 
шая идея. Решением такой проблемы является использование функции АРІ, 
область действия которой распространяется не на объект-прототип, а на саму 
Функцию конструктора. Данную функцию можно рассматривать как стати- 
ческий метод в мире Лауа. В конечном итоге мы хотим, чтобы клиент мог 
написать код, который выглядит примерно следующим образом: 


ХоЬТНе1рехг.1$х5Тбаррогееа{); 
вместо того, чтобы создавать объект так, как показано ниже. 
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уаг һе1рег = пем ХЅІТНе1ірег( 'рһопеВоок.хтм1', 
{ ЕгапзЁогтаёіоп.хѕ1') ; 
уаг сапротһіѕ = Һһе1рег.іѕхХЅ1Тбиррогёеа(); 
Для этого предоставим нашим пользователям статический метод, кото- 
рый выражается таким образом: 
ХІ ТНе1рег.іѕхѕіТЅиррогіеа = Ёџпсііоп() { 


гебигп (уіпаоу. ХМІНЕбрКесиеѕё && міпаоит.Х51ТРгосеѕѕор) || 
ХѕІТНе1рег.іѕІЕХМ1 Ѕиррогіёеа (); 





} 
ХѕІТНе1рег.іѕІЕХт1 Ѕиррогіеа = ЕопсЕ1оп() { 
1Е ( ! міпаоу.АсііуехХорјесё ) 
геёцгп Еа15е; 
Егу { пен Асііуехорюј есі ("МісгоѕоЁі . ХМІром"); 
геёцгп ёгџе; } 
саїсһћ (егг) { геїигп Ёа1ѕе; } 





> 

Здесь мы не использовали ничего нового. Логика идентична определен- 
ной ранее; мы просто инкапсулировали информацию о наличии поддержки 
Х517Т. Наверняка кто-то нас за это поблагодарит. Теперь же мы можем кон- 
кретизировать оставшуюся часть АРІ ХЅІТНеірег. 

Не будем все усложнять. Как вы относитесь к тому, чтобы выполнение 
Х5ГТ-обработки требовало от клиентов нашего класса вызова единственного 
метода? Для этого мы включим во вспомогательный объект дополнитель- 
ные методы, разделяющие ответственности всей внутренней логики, но для 
клиентов мы реализуем один общий АРГ. Семантика данного объекта бу- 
дет следующей: 

уаг һеІрег = пем ХЗГТНефег ( ‘рһопеВоок. хт!", 

'(гапзРогтайоп.х5 ); 

Берег 1оаа\1е\{ 'ѕотеСопѓаіпегіа' ); 

В данном примере документ рһопеВоок. хт нужно преобразовать в 
НТМЕГ с помощью документа їгапѕѓогтаїіоп.хѕї, а полученный в резуль- 
тате НТМГ-код следует поместить в элемент с идентификатором зотеСоп- 
ќаіпегіа. Кроме того, зададим, что функция Іоайуіем() может принимать 
в качестве параметров либо строку, представляющую идентификатор элемен- 
та, либо сам элемент. Внутренний код функции сам определит, с чем он имеет 
дело, и отреагирует соответствующим образом. Да, кстати, если клиент не 
собирается повторно использовать экземпляр нашего вспомогательного объ- 
екта, все сказанное можно выразить в одной строке кода: 


пем ХЅ1.ТНе1рег('рһопеВоок.хт!', 
"гапѕѓогтаїіоп.хѕ1') Іоаауіем('ѕотеСопѓаіпег1а'); 
Определив АРІ и его семантику, мы можем реализовать его, как показано 
в листинге 12.13. 
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Листинг 12.13. Метод 1оаЯу1ем 
1оааУ1ем: ЕопсЕ1оп ( сопёаіпег ) { 
/ /О Проверить поддержку ХЅІТ 
1Е ( ! ХЅ1ТНе1ірег.іѕхоІТтбиррогіеао 
геіигп; 
// © Заново инициализировать состояние вспомогательного объекта 
еҺіѕ.хм1росоимепі = пи11; 
еһіѕ.хѕ1біу1ебһееі = по11; 
Єһіѕ.сопбаіпег = $ (сопіёаіпег); 
// © Запросить документы 
пет АЈјах.Кесоеѕіё &61$.хи109ВЦ, 
{опСопр1іебе: Еһіѕ.ѕеёХМІросотепё .ріпа (Еһіѕ) Ј ); 
пех Ајах.Кедоезѕі ( ёһіѕ.хѕ10КІ, 
{пеёһоа: "СЕТ", опСошрТебе: 
6515$ .зеЕХ5ГРосимейе .ріпа (Еһіѕ)} ) ; 











Ь 





Первое, что делает метод 1оаа\У1е\(), — это убеждается в том, что ис- 
пользуемый браузер поддерживает ХЗГТ О. Вообще-то, клиент уже должен 
был это сделать (как в нашем предыдущем примере), но если нам попался 
безответственный пользователь, лучше лишний раз все перепроверить. За- 
тем метод присваивает значение пи! переменным состояния, которые будут 
хранить документы ХМГ и Х$[, и устанавливает ссылку на обновляемый 
контейнер ©. Наконец, метод отправляет запросы Адах для извлечения до- 
кументов ХМГ и ХЅІ, ©, Когда сервер пришлет затребованный документ 
ХМІ, будет вызван метод зе ХМГоситег: (). Аналогично, когда сервер вер- 
нет документ ХЅІ, вызывается метод ѕеіХЅ1.Ооситег (). Реализация данных 
функций показана в листинге 12.14. 


Листинг 12.14. Настройка документов ХМІ и ХЗЕ 
зехМЕРоситепЕ Ғипсііоп(гедиеѕї) { 


%ћіѕ.хт1 Ооситепі = гедиеѕі.геѕропѕехХмі1; 
1һ15.ирааѓеУіеуІ#Ооситепіѕ .оааеа(); 


зе1Х$1.Роситепе: Ғипсііоп(гедиеѕї) { 


єһіѕ.хѕ185їуІеЅһееї = геадие$1.гезропзех МГ; 
101$. прдае Улем ПРоситеп($Гоа4аеа(); 


Указанные методы сопоставляют с переменными состояния объекта 
ХЛ Нерег документы ХМІ. и ХЗГ. Затем они вызывают метод иразже- 
Уіеуі#ОосотепіѕГоайеа(), который проверяет, инициализированы ли оба до- 
кумента, и в случае положительного ответа обновляет представление. Метод 
ирдж{е\Ме\ ОоситетГоа4аеа() реализован следующим образом: 


ордӢаёеуіенІЕросотепіѕІоайаеа: РЕапсЕ1оп() { 


1Е ( ЕҺ1іѕ.хт1роситепі == по11 |І ёҺіѕ.хѕ150у1еѕһее == пџи11 ) 
геіиогп; 


Е615.праасе\У1ем(); 
Ь 
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Как только с сервера поступят оба документа, мы сможем обновить 
пользовательский интерфейс. Мы узнаем, что оба отклика поступили, когда 
обе переменные состояния, (51$ .хи1РосимейЕ и 661$ .хѕібіу1еЅһееё, будут 





иметь значение, не равное пи11. Соответствующий метод обновления прааЕе- 
е\1ем() показан в листинге 12.15. 


орааёеуіеум: Ёџпсёіоп () { 
1Е { 1 Х51ТНе1рег.1іѕх51Тбиррогёеао ) 
геіигп; 


1Е { міпаоу.ХМІНЕбрКесиеѕі && м1паом.хХ5ТРгосезвог ) 
с15$.прасеу\У1емМо7111а(); 

е1ѕе 1Е ( міпаӢоух.АсііуехоОрјесё ) 
ср1$.праасеуУ1емтЕ(); 





Ь 


м 


Как уже отмечалось, для каждого поддерживаемого типа браузеров тре- 
буется отдельная реализация. Детали соответствующих процессов мы рас- 
смотрим по отдельности, начав с реализации для браузера Мо7Ша, показан- 
ной в листинге 12.16. 


Листинг 12.16. Обновление представления в браузере Мо7Иа 
џрааёеуіеуммох2і11а: Ёџпсёіоп!) { 
// Инициализировать трансформер 
уаг хѕіїРгосеѕѕог =* пем ХІТРгосеѕзог (); 
хѕ1ЕРгосеѕѕог.іпрогіЅіу1еѕћееѓ (Ећіѕ.хѕ15іу1ебһееб) ; 
уаг Ёгасдтепё - хѕ1ёРгосеѕѕог. 
// О Выполнить ХЅІТ-преобразование 
Тгапз ҒогттоҒгастепё ( 
еһіѕ. хм роситмепі, аосимепі); 
// @ Обновить пользовательский интерфейс 
ЕҺ1ѕ.сопіаіпег.іппегнтмі = ""; 
ЕҺ15ѕ.сопіаіпег.аррепасћһі1а ( Екастепі) ; 


Г. е 





Обновление визуального представления в поддерживаемых браузерах 
(Іпѓегпеі ЕхрІогег и Мох Ша) включает два основных этапа: О выполнение 
ХЅІТ-преобразования и © обновление пользовательского интерфейса соглас- 
но полученным результатам. Напомним, что результат процесса преобразова- 
ния в браузере МохШа — это фрагмент документа, добавляемый к элементу с 
помощью аррепасћһі1а(), тогда как преобразование в Пиеге ЕхріІогег дает 
строку, добавляемую посредством свойства шпегНТМГ. Таким образом, реа- 
лизация функции ирӣаіеМіем1Е () должна выглядеть следующим образом: 

ирд4ае\Ме\Е: Ғопсіоп() { 


1ћ15.сопѓаіпег.іппегГНТМІ. = 
115.хмОоситепі.ігапѕѓогт Мое {#һ1ѕ.хѕ18$1уІеЅһееї); 


Ь 


В реализации для браузера Іпһќегпеї ЕхрІогег задействованы те же два 
этапа, что и ранее, причем на этот раз они записаны гораздо компактнее, по 
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скольку и применение преобразования, и обновление пользовательского ин- 
терфейса представляется одной строкой кода. Относительно того, какая из 
реализаций эффективнее — решать вам. 

Итак, объект х5ГТНерег готов, и у нас есть понятный, простой 
метод АРТ, в который включены все действия, связанные с ХЅІТ- 
преобразованиями. Данный вспомогательный объект наверняка будет'очень 
полезным и точно будет стоить тех усилий, которые мы в него вложили. 

А теперь вернемся к "живому" поиску и попытаемся получить компонент 
с простой структурой. 


‚ 
12.6.2. Компонент "живого" поиска 


Ну вот, в заднем кармане у нас припрятана удобная поддержка ХЗГТ, и те- 
перь мы реализуем сценарий "живого" поиска в виде компонента, который 
должен удовлетворять требованиям, обсуждавшимся в разделах о реструк- 
туризации других глав. Нам требуется хороший АРТ, возможность настройки 
при наличии необходимого числа значений по умолчанию, малозаметность 
для НТМГ-страницы, содержащей компонент, а также возможность исполь- 
зования на одной странице нескольких экземпляров компонента. Итак, разра- 
ботаем понятное объектно-ориентированное решение, основным принципом 
которого будет инкапсуляция каждой ответственности в отдельный метод. 
Одна ответственность — один метод. Запомним этот принцип и начнем, как 
обычно, — с построения. 

С точки зрения состояния структура "живого" поиска должна отслежи- 
вать больше элементов, чем любой другой написанный нами компонент. Она 
должна знать, где взять документы ХМІ. и ХЗ[, какое поле инициирует по- 
иск, какой ОКГ страницы нужно использовать для поддержки закладок. 
В общем, соответствующий конструктор будет более громоздким, чем кон- 
структоры, описанные в предыдущих главах. Тем не менее мы все равно 
сможем им управлять. Итак, посмотрим, как выглядит конструктор "живо- 
го" поиска. 


РапсНоп ШуеЅеагсһ( раге ВТ, ІооһирЕіеІа, хи ОВГ, 

хХЗЕОВГ, орійопѕ ) { 

{615.раге ОВГ, = раге ОВ; 

1һ15.ЈоокирЕіеіа = ІоокирЕіе1а; 

1115. хи ОВГ, = хОВГ 

1615. хз ПОВ = хШОВГ; 

{015.зеОрНоп5{орНоп$5); 

// О Настроить компонент 

уаг оТһіѕ - 1115; 

1оокирЕ1е1А.Гогт.опзибт16 * Гапс от (){ 
оТтһіѕ.аобеагсһ(); геїогп Ёа1ѕе; }; 

// Перейти к предыдущему поиску 

єћіѕ.іпіёіа1іхе(); 

} 


Первые четыре аргумента конструктора были названы выше: ОКІ стра- 
ницы, поле поиска и ОКІ. двух документов. Последним параметром является 
уже привычный параметр орііопѕ, используемый для настройки конфигура- 
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ции компонента. Аргумент орііопѕ передается методу ѕеїОрііопѕ(), кото- 
рый обеспечивает значения по умолчанию для всех настраиваемых данных О. 
Рассмотрим кратко этот метод. 


ѕзесОрііопѕ: ЕапсЕ1оп (орёіопѕ) { 


еһіѕ.орііопѕ — орііопѕ; 

1Е ( !1Еһіѕ.орбіопѕ.1оааіпод1таде ) 
6515$ .орЕ1оп$.1оа91п9]таде = 'іптадеѕ/1оайіпд.о1Ё'; 

1Е ( !©һіѕ.орііопѕ.роокпагкСопёаіпегіа ) 
Ећіѕ.орііопѕ.рооктагкСопбаіпег1а = 'Ьооктагк'; 

1Е { !һ1ѕ.орііопѕ.кеѕи1ёѕСопіаіпег1а ) 
еһ1іѕ.орі1іопѕ.геѕи1єѕСопбаіпегіа - 'геѕи1ѕ'; 

1Е { 1Еһіѕ.орёіопѕ.рооктагктТехі ) 
ЕҺіѕ.орііопѕ-рооктагкТехі = 'Воокпагк Ѕеагспһ'; 


> 

В данном примере метод ѕеїОрііопѕ {) не настолько лаконичен, как в 
компоненте ТехїЅирвеѕї (см. главу 10), когда с помощью метода ех{епа() 
библиотеки Ргоїоїуре мы получили аккуратное и компактное выражение. 
Тем не менее сейчас метод выполняет те же действия и предоставляет зна- 
чения по умолчанию для изображения, отображаемого в процессе загрузки, 
идентификатора элемента, содержащего закладку, идентификатора элемен- 
та, содержащего результаты, и, наконец, текста сгенерированной закладки. 
Как и в прошлый раз, если в объекте орііопѕ были переданы значения этих 
свойств,* они заменяют указанные значения по умолчанию. Полученный в ре- 
зультате объект орііопѕ представляет собой смешанный набор значений по 
умолчанию и значений, заданных пользователем. Затем данные опции ис- 
пользуются в соответствующих местах сценария для настройки конфигура- 
ции компонента. 

Разобравшись с настройкой конфигурации и значениями по умолчанию, 
вернемся к конструктору и напомним две ненавязчивые строки кода: 

уаг оТһіѕ = 1115; 

ІоокирЕіе!а.ѓогт.опѕиьтії = Ёопсііоп(){ 

оТһіѕ.аоЅеагсһ{); геіигп Ёа15е; }; 

Напомним, что в первоначальном варианте сценарий модифицировал 

НТМІ -страницу, помещая в форму поиска обработчик событий опѕиьтії. 


<Еогт паме= "Ғокті" опѕицртіё= "Скармитпрехг ();хебакп Ёа1ѕе; "> 


Поскольку мы пытаемся сделать компоненты максимально ненавязчивы- 
ми (по крайней мере, с точки зрения того, сколько НТМГ-кода нужно из- 
менить для использования компонента), две приведенные выше строки кода 
конструктора предлагают те же функциональные возможности, что и упомя- 
нутая модификация НТМІ-страницы. С точки зрения именования отличие 
заключается в переименовании Ста ММитбегО в более универсальный вари- 
ант аоЅеагсһ(), причем дозеагсв() — это метод нашего компонента, а не 
глобальная функция. Кстати, посмотрим, как реализован метод аоЅеагсћії): 

аоЅеагсһ: Ғипсііоп{) 


і? ( ХЅІТНеірег.18Х51 ТЅиррогѓіеа() ) 
Е асаба онох 


е1зе 1һ15.506тіТћеЕогтії); 


}, 
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Наш "разумный" компонент знает, что он должен убедиться в поддерж- 
ке ХЅІТ, а лишь затем пытаться выполнить ХЗ[ГТ-обработку, поэтому метод 
поиска использует написанный ранее АРІ хз Г ТНерег и определяет, исполь- 
зовать ли Х5ГТ-обработку или активизировать стандартную отправку фор- 
мы. Действительно, довольно разумно. Клиент может просто вызывать метод 
дӢоЅеагсһ(), не задумываясь о тонкостях использования ХЗГТ. Обо всем по- 
заботимся мы. Поэтому сейчас подробно рассмотрим два варианта поиска. 
Поскольку отправка формы проще, начнем именно с нее. 


забтиТВеРогт: Ғопсііоп() { 
уаг ѕеѕгсһЕогт = #һ15.1оокирЕіе1а.Ғогт; 
ѕеагсһ Еогт.опѕибгаіі « Рапсйоп() { теги їгие; }; 
ѕеагсһ Еогт.ѕибтії(); | 


Ь 

Указанный метод находит с помощью поля поиска ссылку на соответ- 
ствующую форму и изменяет ее обработчик событий опѕиЬтії на функцию, 
возвращаюшую значения їгие. Это позволяет явно возвращать запрос поиска 
на сервер. Затем метод вызывает метод заб ти () "родной" формы НТМІ., ко- 
торый инициирует традиционную отправку формы. В данном сценарии ком- 
понент предполагает наличие в форме соответствующего атрибута действия; 
также считается, что результат действия возвращает соответствующую стра- 
ницу с результатами поиска. 

Далее рассмотрим реализацию поиска средствами Ајах. 

аоАј ахЅеагсһ: Рапсйоп() { 

// О Показать изображение в процессе загрузки 


{61$.5 пом Гоа41т | тазе(); 
уаг ѕеагсћ0Огі = #һіѕ.аррепатТо0тгі( 11:5.хш!ОВГ, 'а’, 


// © Сформировать ОВІ, операции поиска 
{61$.[оокирЕ1е!4.уа!ше); 


// © Выполнить ХЅІТ-обработку 
пех ХІ ТНе1Ірегіѕеагсһ Ог|, 111$. хз ПОВГ,).1оаа\Утем ( 
{015$. ор оп$.тгези 115 Сопѓаіпегіа); 


// О Обновить закладку 
{61$.прд4аеВооктагКк (); 

Ь 

Метод 4оА] ахЅеагсһ () выполняет те же действия, что и первоначальный 
вариант нашего сценария, однако теперь каждый этап обработки помещен в 
отдельный метод, отвечающий за свою часть работы. Вы можете возразить и 
сказать, что данный метод имеет четыре ответственности. Но на самом деле 
ответственность одна: поиск. Однако она состоит из четырех частей, каждая 
из которых формулируется как ответственность. Рассмотрим их. 


О Показать изображение в процессе загрузки. Поиск начинается с вызова 
метода, демонстрирующего изображение "идет загрузка". Используемое 
изображение определяется объектом опций. 
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ѕзћһомГоадаіпдімаде: Ёоџпсёіоп() { 
аг пем1иа = досимепё .сгеаёсеЕ1етмепі ('іто); 
пеу1то . зекАёіг1ірибе ('ѕус', ЕҺіѕ.орёіопѕ.1оадіпдІтаде ); 





дӢосотепё .чесЕ1етепеВута ( 
СћҺіѕ.орёіопѕ. геѕи1іѕСопёаіпег1а) .аррепасћі1а (пем1та); 
А 


0 Сформировать ОРІ операции поиска. ЧВГ операции поиска формируется 
с использованием атрибута хиПОВГ, который был передан в момент созда- 
ния с параметром 4=, к которому присоединено значение, находящееся в 
текущий момент в поле поиска. Объединение (конкатенация) выполня- 
ется методом, проверяющим ОКІ. на существование предыдущей строки 
запроса (таким образом гарантируется использование правильных разде- 
лителей параметров). 


аррепаТоИип: ѓопсііоп (иті, пате, уае) { 
уаг зерагафог = '?' 
Ш (ап. іпаехО#(ѕератаѓог) > 0; ) ѕерагаіог = '&'; 


' ' 


геїигп игі + ѕерагаїог + пате ее =' + уаше; 


}, 


© Выполнить ХӘІ.Т-обработку и обновить пользовательский интерфейс. 
Поскольку мы предусмотрительно вынесли в отдельный метод задачу 
ХЗГТ-обработки на стороне клиента, данная внешне сложная ответствен- 
ность выполняется посредством единственной строки кода. 


пе Х5ГТНерег(зеатс ВИП, 
1615. хз ПО ВГ) 1оаа\У1ем (161$. орНоп$.гезиИ$Сощашег!а); 


О Обновить закладку. После того как пользователь инициировал поиск, 
необходимо обновить закладку. Данная ответственность выполняется с 
помощью метода ирааѓеВооктагкК(). 


ирааіеВооктагк: Ёопсііоп() { 

уаг сопіаіпег • аоситепїі. веЕетепіВу1аї 
1ћіѕ.орііопѕ.бБооктагкСопѓаіпегіа); 

уаг БооктагкКОВГ = #һіѕ.аррепатТо0гі( 
һіѕ.равеОві, 'а', {11$.1ооКкирЕ!е14.уа!ше ); 

Ш ( сопѓаіпег ) 
сопіѓаіпег.іппегНТМІ, = '<а Вгеё^"' + 

бооктагкКОКі, + '" >'+1һіѕ.орііопѕ.бооктагкТехі + '</а>'; 

} 

Этот метод берет из объекта опций элемент сопїаіпег и текст заклад- 
ки. ОВГ сгенерированной закладки представляет собой значение, переданное 
конструктору в форме аргумента раге ОВГ. К этому указателю добавляется 
параметр 4= со значением текущего поиска. Согласно всем полученным зна- 
чениям обновляется свойство шпегНТМГ, контейнера и получается соответ- 
ствующий ОВГ. 

Если закладка была записана и использована для возврата на страницу, 
пользователь переходит на страницу с параметром д=ѕотеУаіџе. Но что ини- 
циирует поиск, чтобы мы получили требуемый результат? Напомним, что в 
последней строке конструктора вызывался метод 1115.11111а117е();. Мы 
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еще не оговаривали, что этот метод делает, поэтому теперь самое время это 
уточнить. Как вы, возможно, догадались, метод іпіїіа1іле () требуется для 
поддержки концепции закладки. Реализация этого метода выглядит следую- 
щим образом: 


іпібіаііле: Ёопсіоп{) { 
уаг сиггеОцегу = Яоситепї.Іосаїіоп.ѕеагсһ; 
уаг аш4аех = сиггепіОоегу.іпаехО є ('а='); 
Ш ( араех != -1 { 
{015.1оокирЕ1е[4.уае = 
сиггепїОоегу.ѕибѕігіпе( ашаех + 2 ); 
{015.4обеагсВ(); 


Ь 


Метод іпіїіаІіхе () принимает текущее положение документа и ишет 
в строке запроса параметр а. Если он существует, метод выделяет значение 
параметра и передает его в поле поиска. Затем он инициирует поиск посред- 
ством метода 4озеагсй (). Что и требовалось получить. 


12.6.3. Выводы 


Остановимся на мгновение и рассмотрим, чего же мы добились. Мы написали 
вспомогательный класс ХЗГТНерег, инкапсулирующий все тяжким трудом 
добытые знания по обеспечению поддержки ХЗГТ в браузере клиента. Мы 
в полной мере использовали данный вспомогательный класс в компоненте 
'живого" поиска. Мы написали простой, но настраиваемый компонент "жи- 
вого" поиска, принимающий очень мало информации и превращающий МебБ- 
страницу пользователя в отзывчивое поисковое животное. При написании 
компонента мы придерживались классического объектно-ориентированного 
:тиля, иллюстрирующего простую структуру и разделение ответственности. 
В целом совсем неплохо для одного дня работы. 


12.7. Резюме 


3 данной главе мы воспользовались обычной поисковой страницей и доба- 
шли в нее функциональные возможности Ајах. Главной особенностью на- 
пего поиска является то, что он не запрещает пользователю взаимодейство- 
ать с окном во время выполнения обработки запроса на стороне сервера. 
Это означает, что в браузер можно, например, поместить анимацию. Нали- 
ше контроля над браузером позволяет выполнять другие действия, так что 
ш можем быть уверенными, что пользователи приложения знают о том, что 
ВОНСК выполняется. 


Далее мы реализовали ХЅІТ-обработку, превращающую наш документ 
МЕ в отформатированный НТМГ-код, который мы передаем свойству іп- 
егнтмь элемента Чу. Это позволяет отказаться от использования ЈауаЅсгірї 
‚ля динамической обработки узлов ХМЕ и создания большой строки, приме- 
яемой к документу. Вместо этого в вопросе получения документа из ХМІ- 
ода мы можем положиться на ХЗЕТ. 
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То, что мы использовали анимацию в процессе обработки и ХЅІТ при ре- 
ализации "живого" поиска, совсем не означает, что эти концепции нельзя при- 
менить к другим проектам. Описанные возможности добавляются и к обыч- 
ным транзакциям с сервером. Пользователи часто говорят, что какой-то про- 
цесс требует нескольких минут. Можем ли мы как-то показать подобное сооб- 
щение? Например, с помощью свойства іппегНТМІ. из данного проекта мы мо- 
жем легко добавить на страницу сообщение или изображение, указывающее 
пользователю, что поиск выполняется. Вообше, практически в любом при- 
ложении Ајах следует указывать, что затребованное действие выполняется, 
чтобы пользователь не щелкал повторно на кнопке отправки или обновления. 


С помошью ХЗЕТ можно задавать стиль сообщений К$5 или изменять 
любой другой описанный в книге проект, используя на стороне клиента вме- 
сто циклического прохода РОМ ХМІ возможности ХЅІТ. 

В четырех примерах, приведенных в этой и предыдущих главах, мы ре- 
ализовали собственные серверные процессы обслуживания наших клиентов 
Ајах. В последней главе мы изучим клиент Ајах, сообщающийся непосред- 
ственно со стандартной МеђЬ-службой: подачей новостей К85. 





В этой главе... 


. Обработка К55-лент 


• Использование Ајах для непосредственного 
доступа к М№еБ-сайтам 


. Ајах без сервера 
• Эффекты перехода 


эть часть ІУ Ајах в примерах 


В четырех предыдущих главах мы разработали широкий спектр аккурат- 
ных приложений Ајах и привели соответствующие коды клиентов и серверов. 
В данной главе мы не будем представлять код серверной части приложения, 
поскольку его просто не будет. Возможно, для многих это будет сюрпризом, 
но приложения Ајах можно запускать для обработки потока данных, формат 
которых совпадает с форматом ответа У№еБ-сервера. В частности, для М№еБ- 
страницы мы можем создать богатый пользовательский интерфейс, действу- 
ющий как клиентское приложение. 

Многие У\УеБ-сайты предлагают ленты сообщений ХМГ в форматах К55 
(КеаПу Ѕітріе Ѕупаісайоп — очень простой синдикат), КОЕ (Кезоигсе Ое- 
ѕсгіріог Етатемогк — каркас дескриптора ресурсов) и Аїот — трех наиболее 
популярных лентах сообщений. Информация, содержащаяся в подобных на- 
борах лент, может представлять собой ежедневные новости, комиксы, блоги, 
шутки, прогноз погоды и т.д. Благодаря Ајах мы можем получать объеди- 
ненную информацию, не посещая все эти сайты и не покупая клиентское 
приложение, считывающее ХМГ-ленты на наш компьютер. 

В данной главе мы создадим собственное клиентское приложение чтения 
ХМГ-лент, получающее ленты с различных УеБ-сайтов. Его можно будет 
запускать в браузере на любом компьютере, подключенном к Интернету. 


13.1. Считывание информации из внешнего мира 


Объединенная лента ХМІ, состоит из статей, которые можно свободно читать 
и отображать на своих У’еБ-сайтах. Хорошим примером объединенной ленты 
ХМГ является блог. Следует отметить, что данные ХМГ-ленты отличаются 
от старых добрых статей на МеБ-сайте, поскольку их можно совместно ис- 
пользовать и отображать во многих форматах. Это похоже на поиск газеты 
или журнала, точно соответствующих размерам стола, за которым вы зав- 
тракаете. Благодаря этому вы можете есть и читать, ничего не передвигая 
и не рискуя разлить утренний кофе. Объединенные ленты можно отформати- 
ровать в любом стиле, удовлетворяющем вашим потребностям, что позволяет 
получать только ту информацию, которая вам действительно требуется. 

Содержимое объединенных лент ХМГ, можно просматривать нескольки- 
ми способами. Например, если данную задачу нужно решить для одного бло- 
га, мы можем зайти на М№еб-сайт, где расположена ХМГ-лента. Чтобы одно- 
временно просматривать несколько лент без обращения к нескольким сайтам, 
можно, например, воспользоваться узлами, подобными ЛауаСга\.сот. Кро- 
ме того, К55-ленту можно просматривать в необработанном виде, непосред- 
ственно открывая исходный ХМГ-файл в МеЬ-браузере, или использовать 
специальное программное обеспечение для структурирования и форматиро- 
вания лент, которые вам требуются. 

Помимо перечисленных вариантов, для просмотра лент можно использо- 
вать Ајах. Без Ајах нам потребовалось бы загрузить клиентское приложение 
или зайти на У№Б-сайт, чтобы получить необходимую информацию, но бла- 
годаря Ајах нам этого делать не придется. Вместо этого мы разработаем 
В55-клиент на основе ЈауаЅсгірі, который можно будет запустить прямо на 
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Рис, 13.1. Блог Эрика Паскарелло, предлагающий В$5-ленту 


рабочем столе, используя только браузер. В данной главе мы создадим при- 
ложение, получающее несколько лент В$5 из нескольких источников и поз- 
воляющее упорядоченно просматривать поступающую информацию. Кроме 
того, для улучшения привлекательности пользовательского интерфейса мы 
интегрируем в приложение эффекты переходов. Однако, прежде чем мы при- 
ступим к разработке приложения Ајах, необходимо разобраться в формате 
ХМГ-ленты и понять, где эти ленты можно взять. 


13.1.1. Поиск ХМІ -лент 


Одним из наиболее популярных мест для поиска ХМГ-лент являются блоги. 
Нынешняя популярность блогов объясняется множеством причин. Они могут 
содержать различную информацию: личные записи, мысли, новости, шутки 
или обсуждение технологий. Рассмотрим один из примеров — блог Эрика 
Паскарелло, показанный на рис. 13.1. 

Данный блог является доступным, т.е. зайти на него может кто угодно. 
Хотя многие пользователи просто читают информацию этого блога, находя- 
щегося на сайте ЈауаКапсһ, блог доступен и в виде ХМІ -ленты. Для чтения 
этой ленты можно обратиться к ее "родной" ХМГ-форме либо зайти на дру- 
гой Мер-сайт (например, Јауа[Гоббу), который получает объединенную ленту 
и отображает ее в собственном формате. 

На рис. 13.1 в правом верхнем углу экрана видны ссылки на №55, КОЕ 
и Аїот. Как отмечалось ранее, данные форматы ХМГ-лент являются наибо- 
лее распространенными. 

Все указанные ленты имеют различные спецификации ХМГ.. Это означа- 
ет, что, изучив соответствующие ХМГ-файлы, мы обнаружим различные схе- 
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Таблица 13.1. Необходимые элементы канала 


Элемент Описание Пример 

деѕсгірііоп Фраза, описывающая канал Странные мысли из головы Эрика 

Пак УВЕ на Мер-сайт НТМЕ, с которым ПИр://гаато. д аиагапсй.сот/ 
установлен канал связи разсаге о 

Ге Имя канала, а также название Блог Эрика на ЈамаВапсһ.сот 


службы. Должно ассоциироваться 
с названием Мер-сайта 


мы именования элементов. Вообще, каждая лента содержит спецификацию, 
уточняющую, какая информация должна определяться в ленте. Поскольку 
мы имеем дело с различными форматами, проще всего выбрать один из них 
и разработать для него клиент чтения лент. 

Поскольку одним из наиболее популярных форматов лент является К55 
(КеаПу ЅітрІе Ѕупӣісайоп — очень простой синдикат), далее мы будем изу- 
чать только К$8-ленты. 


13.1.2. Изучение структуры В55 


Прежде чем приступить к разработке ХМГ-клиента Ајах для чтения лент 
К$5, рассмотрим структуру К55-файла. Знание структуры позволит более 
эффективно исследовать ОМ ХМГ и получить информацию, которую нам 
необходимо отобразить. Итак, документ К$5 состоит из двух частей: канала 
и статей. Канал предоставляет информацию о том, откуда поступает лента; 
назначение статей понятно из названия. 


Составляющие элементы канала 


В определенном смысле канал можно рассматривать как заголовок К858- 
ленты. Элементы канала сообщают пользователю, откуда поступает лента 
К55, как она называется, когда обновлялась последний раз, и т.д. Как пока- 
зано в табл. 13.1, спецификация К585 требует задания крайне малого числа 
элементов. 

Данные три необходимых элемента предоставляют основную информа- 
цию о В55-ленте. Они сообщают, откуда идет В$5-канал, как он называется 
и о чем он. Если нам понадобится другая информация о ленте, потребуется 
обратиться к дополнительным элементам. 

Лента К$5 может содержать любое число из указанных в табл. 13.2 до- 
полнительных элементов канала. Разработчик ленты может не включать их 
в свой продукт, включить один, два или все шестнадцать. 

Некоторые опции включают адреса электронной почты, которые потребу- 
ются при возникновении проблем, касающихся содержимого или структуры. 
Кроме того, имеется информация, объясняющая, когда обновляется лента. 
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Таблица 13.2. Дополнительные элементы канала 


Элемент Описание 

саїедогу Задает, к какой категории принадлежит канал 

сІоиа Позволяет регистрировать процессы 
с атрибутом с1очца, чтобы они уведомлялись 
об обновлении канала. Таким образом, 
реализуется облегченный протокол 
публикации-подписки 

соругідћї Уведомление об авторских правах на 
содержимое канала 

дос УВЕ, указывающий на документацию по 
лентам В$$ 

депегафог Строка, указывающая, какая программа 
использовалась для генерации протокола 

ітаде Задает изображение, которое можно 
отображать вместе с лентой 

Іаподиаде Язык, на котором написан канал 


Іаѕїівипараїе 


Время последнего изменения содержимого 


тападіпо едіїог Электронный адрес редактора, отвечающего 


за содержимое 


Пример 


Программирование 


Эрик Паскарелло 


Ир: //баскепа. 
иѕегіапа. сот/гѕ55 


Ребые 


Вр: //ребЫіе. 
зоипаТогае .пеї/ 
соппоп/ітюадеѕ / 
роиегеа-ру- 
рерр1е.діЁ 


Еп 


раѕсагеПо@ 


јауагапсһ.сот 





рирраїе Дата публикации содержимого 

гаїіпо Рейтинг РІСЅ данного канала. См. 
ір: //мммм.м3.огд/Р1С$/ 

ѕКкір0ауѕ Информирует агрегаторы (программы сбора 
и чтения АВ$$-лент), в какие дни они могут не 
заниматься поиском обновлений 

ѕ5КірНоигѕ Информирует агрегаторы, в какие часы они 
могут не заниматься поиском обновлений 

{ех Иприт Задает поле текстового ввода, которое может 
отображаться 

Е! Указывает время жизни (Тіте їо Шме— ТТЬ), 
или число минут, в течение которых данные 
канала могут котироваться, не требуя 
обновления 

мертаѕіег Адрес электронной почты администратора, мебта${ег@ 


отвечающего за технические вопросы 


јауагапсћ.сот 
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Необходимые и дополнительные элементы канала описывают содержимое 
К55-ленты, позволяя нам определять ее характеристики. Подобно составля- 
ющим канала, составляющие статей также делятся на необходимые и необя- 
зательные. 


Элементы статей 


Как газета состоит из множества статей, так и лента К$5 может содержать 
множество составляющих элементов. Каждый элемент статьи должен иметь 
хотя бы один из следующих компонентов: заголовок или описание. Согласно 
спецификации К$8 необходимым является только один из них, хотя допуска- 
ется использование обоих. 

Кроме того, существует восемь дополнительных элементов, которые мо- 
гут добавляться к статье. Возвращаясь к аналогии с печатной прессой, можно 
сказать, что в газетной статье обычно можно выделить такие элементы; мате- 
риал, фамилия автора, источник и заголовок. Точно так же каждый элемент 
статьи в ленте №55 может содержать свои заголовки, имена авторов, источ- 
ники и т.д. Все дополнительные элементы, которые может содержать статья, 
показаны в табл. 13.3. 

Сердцем и душой ленты К$5 являются заголовок и описание. Заголовок 
(61011е) позволяет понять, о чем идет речь в статье, а описание (Аезстр- 
{10оп) может представлять собой одно из двух: краткий конспект статьи или 
всю статью. В настоящее время не существует стандарта, определяющего, 
как должен использоваться элемент йеѕсгірііоп. Чтобы определить, что же 
с ним делать, необходимо изучить каждую ленту, а лишь затем приступать 
к написанию К$5$-клиента. Если это конспект — его можно сравнить с анно- 
тацией на обложке журнала, в которой сказано: "подробности см. на с. 10". 
Вот именно здесь нам потребуется элемент 1іпк, представляющий собой ОКІ. 
всей статьи на сайте автора. 

Большинство Ҝ98-лент пытается использовать максимальное число 
дополнительных элементов, поскольку это помогает разработчикам (на- 
пример, нам) создавать максимально надежные Ҝ55-приложения. Чем 
больше данных предоставлено, тем лучше можно отобразить содержи- 
мое К55-ленты. Подробнее о спецификации №55 рассказывается на сайте 
БИр://БасКепа.изе!ап4.соп/г$$. 

Разобравшись с основными элементами документа К$5, можно присту- 
пать к разработке собственного К55-клиента на основе Ајах. 


13.2. Богатый пользовательский интерфейс 


В данной главе мы создадим программу просмотра К$5-лент, получающую 
ленты ХМЕ с У№еБ-сайта без использования серверных технологий, подобных 
* МЕТ или ЈЅР, или клиентского приложения. Ајах позволяет просматривать 
информацию в виде №\еЫ-страницы, записанной на рабочем столе. Данный 
пример показывает, что инфраструктура Ајах не обязательно требует МеБ- 
сервера, использующего технологию, подобную .МЕТ или ЈЅР. Если компью- 


Таблица 13.3. 


Элемент 


аи(Пог 


саїедогу 


соттепіѕ 


аеѕсгірііоп 


епс1іоѕиге 


виіа 


іпк 


рирраїе 


ѕоигсе 


Піе 
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Элементы статьи 


Описание 


Пример 


Адрес электронной почты автора Раѕсаге По @јауагапсһ. сот 


ПОЗИЦИИ 


Включает позиции в одну или 
несколько категорий 


Программирование 


ОВІ, страницы с комментариями, Вр: / /тайіо .јауагапсһ.сот/ 


касающимися данной позиции 


Резюме 


Описывает медиа-объект, 
присоединенный к статье 


Строка, представляющая собой 
уникальный идентификатор 


ОВІ. статьи 


Дата опубликования статьи 


Канал К55, по которому 
поступает статья 


Заголовок элемента 


раѕсагео/2005/05/25/1117043 
999998. Нем Исо!гапеп($ 


Ајах позволяет разработчикам улучшать 
пользовательский интерфейс, делая 
\Меб-приложение похожим на 
клиентское приложение 


<епсІоѕиге иг1 = "һіір: //гаа1о. 
јауагапсһ.сот/раѕсагеПо/тейіа/ 

ТһеАј ах пАсііопЅопе.тр3 

"Тепеёћ = "5908 124"уре="аоаіо/ 

трев"'/> 

Һр: //тааіо.јауагапсһ.сот/ 
раѕсагео/2005/05 /25/1117043 

999998.һеті 


ћір://гааіо.јауагапсһ.сот/ 
разсаге11о/ 
Среда, 25 мая 2005 г., 17:59:59 СМТ 


<зоигсе иг! = "һр: //гаа1о. 
]ауагапсВ. сот /разсаге о / 
Ыов-хтіѕ- Егіс $ В108</зоигсе> 
Ајах улучшает разработку 
пользовательского интерфейса 


тер подключен к Интернету, мы можем обращаться к К5$5-лентам любых вы- 
бранных сайтов. (Если вы пользуетесь браузером МохШа, см. раздел 13.6.1. 
Прежде чем вы сможете использовать код, представленный в данном проек- 
те, вам потребуется обойти ограничения безопасности Мо7Ша, рассмотренные 


в главе 7.) 


13.2.1. Чтение лент 


Если вам приходится ежедневно просматривать несколько М№еб-сайтов, с по- 
мощью нашего приложения вы сможете обойтись без этого утомительного 
процесса. Используя предлагаемую программу просмотра, вы получите необ- 
ходимое число лент на одной странице. 
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Рис. 13.2. Последовательность действий программы чтения В55-пент 


Уникальность нашего приложения заключается в том, что оно не исполь- 
зует никакого серверного кода; мы только получаем ХМГ-документы К5$, 
создаваемые другими УеБ-сайтами. Все приложение размещается на У№- 
странице, записанной в среде рабочего стола или загружаемой как часть на- 
шего Меб-сайта. 

Прежде всего необходимо понять, на какие этапы разбивается разработ- 
ка требуемого приложения. Мы разрабатываем программу чтения В55-лент, 
которая настраивает слайд-шоу, использующее два слоя. Каждый слой будет 
содержать одну ленту, которая будет показываться заданный период време- 
ни, после чего будет проявляться вторая лента. Алгоритм действий данного 
приложения показан на рис. 13.2. 

Процесс чтения лент состоит из нескольких этапов Первый этап — это 
загрузка нескольких выбранных лент. Для хранения информации, необходи- 
мой различным ист:очникам лент, мы будем применять общий массив. Кроме 
того, мы не будем использовать дополнительные элементы статей, приведен- 
ные в табл. 13.2. 

После загрузки файлов нам придется создать упомянутый выше эффект 
перехода (постепенное проявление и затухание). В данном случае мы исполь- 
зуем для этого классы С5$. Переключение между сообщениями и цикличе- 
ский показ сообщений будет реализован с помощью таймера. 

Мы также создадим в приложении кнопки "Вперед", "Назад" и "Пауза". 
Кроме того, можно добавить возможность вставки дополнительных потоков 
из предлагаемого списка. А начнем мы с создания на стороне клиента формы 
и слоев. 


13.2.2. НТМЕ-структура без таблиц 


Самой объемной частью данного проекта является представление. Для со- 
здания структуры в форме таблицы, содержащей заголовок, тело и нижний 
колонтитул, мы используем ряд элементов Чу и зрап. Результат, который 
мы собираемся получить, показан на рис. 13.3. 





Рис. 13.3. Окончательный вид программы чтения В$$-лент 


Для формирования структуры можно былобы использовать и таблицы, 
но такое решение было бы допустимым до начала эпохи С$5 (см. главу 2). 
В настоящее время использование таблиц нежелательно, поскольку их визу- 
ализация требует больше времени, а изменять их сложнее, чем структуру на 
основе С5$. В листинге 13.1 показана разметка, на которой будет основы- 
ваться структура нашей программы чтения ХМГ-сообщений. 


Листинг 13.1. Структура НТМІ-формы, используемой приложением 
<Еохш паме= "Ғогті "> 

















<!-— О Внешний элемент @1у —> 
<аіу 19="а1уМемзНо1аек"> 
<!-— © Элемент Яаіу заголовка —> 
<аіу іа= "аіуМенѕтіё1е"> 
<!— © Счетчик лент —> 
<ѕрап іа=" ѕзрапСоцџпё ">ГоаЯ1па< /зрап> 
«1 О Назвавие“. =—= 
&прѕр;Ајах Мемз Міемег 
</аіу> 
<1— © Контейнер для лент новостей —> 
<аіу іа="аіуда"> 
<!— 0 Слой первой ленты новостей —> 


<аіу іа="аіуМ№еуѕ1" > 

Іоааіпа Сопбепе... 
</аіу> 

е О Нижний колонтитул структуры —> 
<аіу іа= "аіуМ№еуѕ2 "> 

Іоааіпа Сопбепе... 





</аіу> 
</аіу> 
<1- 0 => 
<аіу іа= "аіуСопігоіѕ"> 
== © Кнопки действия —> 


<1приё {уре="БиИоп" пате="ЬіпРгеу" 
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4. Рис. 13.4. Элементы НТМ 
без стилей С55 











іа="ЪпРгеу" уаше="<ВАСК" /> 
<іприё {уре="Би оп" пате="6{пРаизе" 
14="6{пРаизе" уаше="РАЧЗЕ" /> 


<1приё {уре="Би оп" пате= "Бп Мехі" 
іа= "Бп Мех!" уаше="МЕХТ>" /> 


<һг/> 

<1— © Дополнительный элемент лент —> 
<ѕе1есі пате="4918$5"> 
< /ѕеіесі> 


<іпроиё {уре="Ба оп" пате="ЫтАаа" 
уаше="Ааа Еееа" /> 
</аіу> 
</аіу> 
</#огт> 


Первым элементом Чу является іуМемѕНоІйег О — контейнер, исполь- 
зуемый для задания общего размера окна, в котором будет отображаться 
результат выполнения приложения. Следующий элемент Чу — іуМ№емѕТі- 
Пе © — вмещает заголовок нашей структуры. Внутри этого элемента іу мы 
добавляем элемент ѕрап ©, содержащий заполнитель-счетчик лент. Следую- 
щая строка текста О — это название нашего приложения. В данной строке 
мы можем написать все, что угодно. 

Далее идет элемент іуАа ©. Это строка представляет собой заполнитель, 
содержащий информацию о К55-ленте, которую мы извлечем позже. В эле- 
мент ЧАЯ мы помещаем еще два элемента Чу, Ч4уМе\м$1 © и іУуМ№Меуѕ2 ©, 
которые используются для хранения информации Ё858-ленты. Позже мы из- 
меним свойства С55 данных элементов с помощью ЈауаЅсгірї, чтобы создать 
эффект затухания. 

Строка нижнего колонтитула создается с помощью элемента Чу іуСоп- 
{го[$ ©. Она содержит средства навигации и функции управления лентой. 
В данный элемент іу добавляются кнопки "Вперед", "Назад" и "Пауза" ©. 
Чтобы пользователь мог выбирать дополнительные ХМГ-ленты, добавляют- 
ся элемент формы выбора и еще одна кнопка ©. Таким образом, мы получаем 
каркас приложения, показанный на рис. 13.4. 

Рис. 13.4 выглядит не очень привлекательно, поскольку мы еще не от- 
форматировали элементы НТМГ, но с введением правил С98 это изменится. 
Изучая рис. 13.3, видим, что наши элементы Яіу (аіУМеуѕ] и 91М№ $2) долж- 
ны накладываться друг на друга, чтобы мы смогли правильно реализовать 
эффект затухания. 
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13.2.3. Гибкое С$$-форматироеание 


Без С$$ наши У№Б-страницы выглядели бы так, как показано на рис. 13.4: 
серыми и неприглядными. Чтобы улучшить данный пример, мы применим к 
элементам правила стилевого оформления С5$. Стили позволяют легко ре- 
дактировать свойства в будущем, не требуя редактирования НТМІ-файла. 
Первым элементом, для которого мы разработаем стиль, будет внешний кон- 
тейнер іу и строка заголовка. 


Применение стиля к контейнеру и заголовку 


Упомянутый ранее элемент йіуМеуѕНо!йег можно считать контейнером для 
нашего приложения. Он позволяет размещать программу чтения К58-лент 
на странице и задавать ее ширину. Поскольку для представления остальных 
строк мы используем элементы іу, они будут занимать 100% доступной им 
ширины страницы. Задавая ширину в контейнере, мы можем жестко задать 
размер остальных элементов, что облегчит их последующие обновления. Ре- 
ализация сказанного с помощью С$5 показана в листинге 13.2. 


Листинг 13.2. Правила С$$ для контейнера и заголовка 


//О Элемент Яіу контейнера 
#Ч1уМемзНо1аех { 
міаєһ: боорх; 
рогаег: 2рх ѕо1іа БЛаск; 
раааіпд: Орх; 
) 
// © Элемент Яіу заголовка 
#аіуМ№МеуѕтіЄ1е{ 
Ғопё-ѕіле: 20рх; 
Һеідһё: 26рх; 
раскагооџпа-со1ог: #ВАССр9; 
// © Высота строки 
1іле-һеідһё: 26рх; 
] 
// О Счетчик 
#ерапСоцпі { 
// © Структура основана на "плавающих" элементах 


Ғ1оаё: гідһі; 
Ғопё-ѕіле: 15рх; 
рааа1та-кларе: 10рх; 





Для определения стиля элементов формы вызываются идентификаторы 
этих элементов со знаком # О. Таким образом указывается, что стиль необ- 
ходимо связать только с элементом Чу, имеющим идентификатор ФіуМ№Меж- 
$Но!4ег. В данном случае для элемента ФуМемзНо!4ег задаются ширина 
и граница, а область заполнения устанавливается равной 0. 

Задав стиль контейнера, можно форматировать его первую строку. Д“” 
элемента аіуМ№МеуѕТійе нам хотелось бы установить высоту, цвет фона и раз- 
мер шрифта ©. Значение свойства Ипе-Ве120{ © задается равным высоте 


Рис. 13.5. К элементам Ч1\ 
контейнера и заголовка 
применены правила С$5 








элемента іу. Таким образом, мы гарантируем, что наша строка текста высо- 
той 20 пикселей будет правильно вертикально центрирована в элементе іу. 
Если не задавать высоту текста, он будет размещен возле верхней границы 
элемента іу. 

Последним этапом форматирования строки заголовка будет перемещение 
элемента ѕрапСоџпі О к правому краю заголовка {изначально он находится 
перед заголовком). Для этого используется свойство Ноа{ ©, значение кото- 
рого устанавливается равным гівһї. Вследствие этого наш текст выравнива- 
ется по правому краю, независимо от ширины элемента-контейнера (причем 
на заголовок данное правило не влияет). Размер шрифта основного текста 
можно сделать немного меньше, чтобы он не так бросался в глаза, как заго- 
ловок. Свойство раааіпе-гіеһі определяет смещение текста от правого края, 
чтобы он не соприкасался с границей контейнера. Теперь стилевое оформле- 
ние контейнера и заголовка завершено; результат его применения показан на 
рис. 13.5. 

На рис. 13.5 видно, что строка заголовка очень отличается от других 
строк, стиль которых мы еще не определили. Слово Іоайіпе располагается 
в правой части элемента Чу, а текст внутри элемента іу центрирован по 
вертикали. Граница элемента іу, представляющего контейнер приложения, 
окружает все остальные элементы. 

Далее мы займемся стилевым оформлением оставшихся элементов іу. 


Стилевое оформление содержимого окна 


Следующий этап — определение стиля среднего участка, или тела, нашего 
приложения (листинг 13.3). Раздел тела будет содержать отформатирован- 
ную информацию В55-ленты. Элементы Яіу іуМ№емѕ1 и @іУМ№еуѕ2 наложатся 
друг на друга; это нужно для создания эффекта перехода. Для реализации 
этого эффекта мы будем так увеличивать прозрачность слоя, чтобы посте- 
пенно становился виден слой, расположенный под ним. 


Листинг 13.3. Правила С55 для элементов Ч1\ тела 
// О Отформатировать @а1удАа 
#А1уАа { 
// © Задать ширину- 
міаєһ: 100%; 
// © Задать высоту 
Һеісһі: 400рх; 
// О Скрыть полосу прокрутки 
оуегЕ1ои: Һіадеп; 
// © Отформатировать границы 
рогӣаег-ёор: 2рх ѕо1іа р1Іаск; 
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рогаег-роёіот: 2рх ѕо1іа Ю1аск; 
} 


// © Задать стиль обоих элементов @1у новостей 


#а1УМемз1, #аіуМ№еу52 { 
// в Задать ширину и высоту 
міаєһ: 100%; 
Һеіодћё: 400рх; 
раскадгоџпа: #09ССВА; 
// О Задать относительное расположение 
роѕіёіоп: ге1аблуе; 
// © Если необходимо, показать полосы прокрутки 


оуегЕ1ом: аџбо; 
// © Придвинуть элементы іу к краю 
1еЕЕ: Орх; 





т 


//О Разместить первый элемент Чу 
#аіуМемѕ1{їор: Орх;} 

// © Разместить второй элемент Чу 
#аіуМем52{ 0р: -400рх;} 


Прежде всего нам требуется определить стиль элемента ЧАЯ О, пред- 
ставляющего собой контейнер элементов зрап К55-лент. Ширина © устанав- 
ливается равной 100%, а высота © — 400рх. Нам не нужно, чтобы в дан- 
ной строке использовалась полоса прокрутки, поэтому значение свойства 
оуегНо\ О устанавливается равным Һіайеп. Это означает, что если ширина 
какого-то элемента будет больше 400 пикселей, он будет частично не видим. 
Другие элементы у внутри данного контейнера позволяют использовать 
прокрутку, поэтому содержимое мы не потерям. После этого мы задаем стиль 
верхней и нижней границ © в виде черных линий шириной 2 пикселя. Боко- 
вые границы не требуются, поскольку для общего контейнера задана ненуле- 
вая границы. Если бы мы задали границу вокруг всей строки, ее ширина по 
бокам была бы равна 4 пикселям, а сверху и снизу — всего 2 пикселям, т.е. 
выглядела довольно несуразной. 

Далее необходимо отформатировать два элемента іу, вмещающих со- 
держимое, — іУуМемѕі и іУуМ№еуѕ2 ©. Их свойства можно задать одновре- 
менно, разделив их идентификаторы запятой. Значения ширины и высоты © 
задаются такими же, как у элемента Ч1у внешнего контейнера. Задание от- 
носительного (те1аїіуе) положения элементов іу © позволяет размещать 
их относительно родительского контейнера іуда, в отличие от абсолютного 
(абзопие) размещения, привязанного к левому верхнему углу окна браузера. 
Свойство оуегЙо\ элементов іу © задается равным ащо, что позволяет при 
необходимости отображать полосы прокрутки. Последний этап — установка 
левой позиции элементов © равной 0 пикселей, что позволяет выравнивать 
элементы Чу, чтобы между их краями не было промежутков. 

Нам требуется, чтобы два элемента Чу, содержащих новости, распола- 
гались один поверх другого. Поскольку используется относительное пози- 
ционирование, с этими двумя элементами необходимо соотнести различные 





Рис. 13.6. Применение правил С$$ к элементам а іу тела 


свойства положения. Поэтому вертикальное положение элемента @уМе\мз1 
О устанавливается равным 0 пикселям. Таким образом, этот элемент будет 
прилипать к верхней границе родительского элемента іу. Положение эле- 
мента аіуМеуѕ2 © устанавливается равным -400рх. Почему мы используем 
отрицательное значение? Дело в том, что, как показано на рис. 13.4 и 13.5, 
второй элемент Яіу располагается ниже по странице, чем первый элемент 
Чу. Поскольку высоту контейнера мы установили равной 400 пикселям, эле- 
мент іуМ№еуѕ2 необходимо поднять на эти 400 пикселей, чтобы он выровнял- 
ся по верху родительского элемента іу (так же, как іу№емѕ1). Обращаясь 
к рис. 13.6, мы видим, что, в отличие от рис. 13.5, два элемента іу теперь 
накладываются друг на друга. 

Поскольку два элемента Чу располагаются один поверх другого, мы ви- 
дим только содержимое одного из них. В данном случае уровень прозрачно- 
сти установлен равным 100%, поэтому содержимое нижнего контейнера не 
видно. К такой конфигурации мы должны прийти после завершения пере- 
хода, однако, прежде, чем мы рассмотрим этот вопрос, давайте закончим 
разработку стилей нашего приложения. 


Настройка нижнего колонтитула 


Последним блоком, для которого мы определим правила С$5, является ниж- 
ний колонтитул. Для данного раздела мы установим цвет фона и стандар- 
тизуем элементы формы, чтобы структура раздела была более отчетливой. 
Для этого мы задаем цвета, размер шрифта и размер кнопок (листинг 13.4). 


Листинг 13.4. Правила С$5 для элемента дім нижнего колонтитула 


// О Определить стиль элемента Піу нижнего колонтитула 
// © Задать цвет фона 
#аіуСопіго1${ 

БасК=гонпа-со!ог: #ВАССр9; 
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// © Центрировать текст 
сехі-а1ісдп: сепіег; 

//О Добавить заполнение 
рааа1та-бор: 4рх; 
райаіпо-роёёот: 4рх; 

} 

// © Определить стиль элементов формы 

#АЧ1уСопего1$ іприё { 

// © Установить размер и цвета 
міаєһ: 100рх; 
раскадгоџпа-со1ор: #8С8С8С; 
со1ог: #000000; 

Ғопї-ѕіле: Юрх; 





С элементом Яіу нижнего колонтитула ӣіуСопїго15 мы соотносим такие 
правила С88 О, чтобы этот элемент согласовывался со строкой заголовка. 
Цвет фона © данного элемента выбран таким же, как у заголовка. Текст го- 
ризонтально выравнивается по центру элемента ©. Далее добавляется запол- 
нение сверху и снизу О, чтобы содержимое не прилипало к границе. Добав- 
лять границу к данному элементу іу не обязательно, поскольку для средней 
строки определена верхняя граница, а три остальные границы определены 
для внешнего контейнера. 

Последним этапом С5$-форматирования нижнего колонтитула будет при- 
менение стилей к элементам формы, чтобы они согласовывались с общим сти- 
лем приложения. Для обращения к элементам кнопок ©, расположенным в 
аіуСопігоі, используется структура, сформированная следующим образом: 
имя элемента іу, пробел и имя дескриптора. Это означает, что указанные 
свойства будут сопоставлены только с элементами, расположенными в дан- 
ном дескрипторе іу. Все остальные элементы страницы с таким же именем 
дескриптора этих свойств не получат. 

Поскольку текст всех кнопок имеет разную длину, то свойство \1А © 
для кнопок задается так, что теперь все они будут одинаковой ширины, т.е. 
выглядеть более однородно. Мы изменили цвет фона, и теперь он не совпа- 
дает с принятым по умолчанию в системе пользователя. Кроме того, можно 
задать цвет текста и размер шрифта текста элемента. На рис. 13.7 показан 
окончательный вид нижнего колонтитула — теперь он лучше согласуется с 
внешним видом всего приложения. 

На рис. 13.7 видны все свойства, соотнесенные с элементами іу. Мы 
определили размеры, цвета, кегли, границы, заполнение и многое другое. 
Свойства С85 этих элементов можно настроить так, чтобы они соответство- 
вали любой заданной теме Мер-сайта или личным предпочтениям. Далее нам 
необходимо получить текст для нашего К55-клиента! 
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Рис. 13.7. Применение правил С$$ книжнему колонтитулу 


13.3. Загрузка В55-лент 


В данном примере мы будем загружать файлы из нескольких лент. Для этого 
будет задействован объект Сощеп оадег (как и во всех остальных примерах 
книги). В первой версии разрабатываемого приложения просмотра К$55-лент 
мы используем ряд глобальных переменных. 


13.3.1. Глобальный уровень 


Глобальные переменные позволяют легко настраивать сценарий, чтобы нам 
не приходилось менять функциональные возможности внутри циклов ѓог и 
таймеров. Возможность настройки содержимого глобальных переменных поз- 
волит вносить глобальные изменения в сценарий и осуществлять связь раз- 
личных функций. Сейчас нам удобнее использовать именно глобальные, а не 
локальные переменные, поскольку они "открыты" для всех функций и можно 
не думать о возможности передачи информации из одной функции в другую. 
Позже в данной главе мы реструктуризируем сценарий и представим решение 
без использования глобальных переменных; сейчас же они просто облегчают 
нам разработку. 

Одним из недостатков Јауа$Ѕсгірі является отсутствие типов переменных 
Для констант, поэтому мы имитируем их с помощью глобальных перемен- 
ных. Однако следует помнить, что значения глобальных переменных могут 
перезаписываться, поэтому использовать их следует очень осторожно. Пере- 
менные, приведенные в листинге 13.5, в процессе работы нашего приложения 
никак меняться не будут. 
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Листинг 13.5. Глобальные переменные с постоянным значением 
уаг Ё11ірІепсдёһ = 5000; уаг ёімеСо1іог = 100; 
уар ѕікЕггогѕ = "<һү/>Еггог 11$6: <рг/>" 
уаг аггауКоѕҒеейѕ = пем Аггау ( 
"ҺЕёр: //гадіо.јауагапсһ. сот/пемѕ /г55.хтю1", 
"ір: //садіо. Зауагапсһ. сот/раѕсаге110/055.хтм1", 
"Беср://хаа1о. ] ауагапсВ .сош/Беаг/г$$.хи1", 
"РЕеср: / /хаЯ1о.Зауахапсь .с0м/1аззе/т$$.хи1"); 








В листинге 13.5 мы определяем глобальные переменные, задающие функ- 
ционирование нашего приложения. Первая глобальная переменная, #1і- 
рГеп®, определяет, сколько миллисекунд будет отображаться текущее со- 
общение до того, как оно заменится следующим. В данном случае время, 
проходящее между сменой сообщений, составляет 5000 миллисекунд. Сле- 
дующая переменная-таймер — ИшеСо]ог — задает время в миллисекундах 
между этапами "раскрашивания" нашего сценария. Чем больше ее значение, 
тем дольше переход. 


Далее определяется глобальная переменная ѕїгЕггогѕ. Здесь формиру- 
ется заголовок сообщений об ошибках, возникающих в процессе загрузки 
Стиль данного сообщения можно изменить; кроме того, с ним можно свя- 
зать параметры стиля. Последняя глобальная переменная, влияющая на вы- 
полнение сценария, представляет собой массив аггауК55 Ғееаѕ. В данный 
массив мы добавляем ОВГ лент К55, которые нас интересуют. В данном 
случае мы обращаемся к четырем различным лентам К88 из радиоблогов 
ЈауаКапсһ.сот. 


Следующий набор глобальных переменных, представленный в листинге 
13.6, используется для передачи данных между отдельными функциями Эти 
переменные хранят состояние приложения чтения К55-лент Их значения из- 
меняются согласно выполняемому действию. 


Листинг 13.6. Глобальные переменные, содержащие информацию о состоянии 


уаг сиггепЕМеѕѕасде =» 0; 

уаг 1ІауегЕгопі = 2; 

уар ЕітмегЅуіісһ; 

уаг рРацѕеа = Ға1ѕе; 

уаг аггаумМеѕѕаде = пем Аггауі) ; 

уаг іпіІоаағі1е = 0; 

уаг рІоадеаопсе = Ға1ѕе; == 


Первая глобальная переменная, значение которой задается в листинге 
13.6, — сиггепіМеѕѕаве. Она отслеживает сообщение, просматриваемое в те- 
кущий момент. В каком-то смысле ее можно считать счетчиком, который 
обнуляется при достижении максимального числа записей. Следующая гло- 
бальная переменная ІауегЕгопі содержит состояние наших слоев. Разраба- 
тывая структуру К$5-клиента, мы наложили друг на друга два слоя. Состо- 
яние этих слоев отслеживается в переменной ІауегЕгопі. 


532 Часть М. Ајах в примерах 


Переменная іітегЅуіїсһ содержит таймер, определяющий, когда прихо- 
дит время загрузки следующего фрейма. Если пользователь щелкает на кноп- 
ке паузы, таймер сбрасывается и изменяется состояние переменной БРаџѕеа. 
Булево значение этой переменной позволяет определять состояние таймера: 
{гие — пауза, Ға1ѕе — запущен. 

Глобальная переменная аггауМеѕѕаве содержит отформатированные со- 
общения, извлекаемые из элементов №55. Этот многомерный массив хранит 
всю информацию, которую мы желаем отобразить на экране. Как отмеча- 
лось ранее, элементы статей содержат больше информации, чем нам может 
потребоваться, поэтому мы выбираем только несколько интересующих нас 
позиций и отображаем их в переменной аггау Меѕѕаре. 

Последняя переменная, шГоааЕПе, приводит нас к следующему бло- 
ку кода. Она представляет собой счетчик, содержащий число текущих 
файлов, извлекаемых из массива аггауК55Еее45 в процессе предваритель- 
ной загрузки. 

Объявив все глобальные переменные, мы уже видим, к чему идет дан- 
ный проект. Мы предварительно загружаем К$$-ленты из массива ОВГ. Для 
отслеживания состояния этого процесса используется счетчик. В ходе пред- 
варительной загрузки из каждого ХМГ-файла мы выбираем только необхо- 
димую информацию. После завершения процесса сообщения отображаются 
попеременно, плавно переходя друг в друга, — создается слайд-шоу, которым 
мы можем управлять (в частности, приостанавливать). Используя объявлен- 
ные глобальные переменные, мы можем контролировать функциональные 
возможности сценария. Таким образом, мы логически подходим к разработке 
функции предварительной загрузки К88-лент. 


13.3.2. Предварительная загрузка средствами А/ах 


Одной из проблем, с которой сталкиваются разработчики Ајах-приложений, 
является предварительная загрузка нескольких файлов, не требующая от- 
правки слишком большого числа запросов к внешним У№-сайтам и решаю- 
щая проблему приоритетов. Одним из решений является реализация очере- 
ди— и именно за это отвечает наш объект Аах СощмепГоадег. 


Формирование запросов 


Объект Сощеп оа4ег позволяет механизму очереди упорядоченно обраба- 
тывать запросы. В листинге 13.7 показано, что мы берем массив (заполнен- 
ный в момент загрузки страницы; см. листинг 13.5), который содержит ОКІ. 
лент, и подготавливаем их для объекта Сощеп оадег. 


Листинг 13.7. Функция Јауа$сгірї предварительной загрузки 


у\1паом.опТоаа = Ёопсііоп () { уаг 1Іоайег= пем Аггау () 
Гог (1=0; і<аггаукѕ5Еееаѕ.1еподіһ;і++) { 
1оадеү [1оайег.1епдёһ] = пем пе .СопёепёІоааег (асггаукЅ5Еееаѕ [1], 


Виі1ахміВвеѕи1ёѕ,Виі1аЕггог) ; } } 
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Код, приведенный в листинге 13.7, срабатывает согласно обработчику со- 
бытий опіоаа. При загрузке страницы мы подготавливаем переменную масси- 
ва |оа4ег, которая будет содержать все запросы к серверу. Мы циклически 
проходим по массиву аггауК$5Еее45 и получаем все указатели ОКГ К85- 
лент, из которых желаем получать информацию. При каждой итерации мы 
увеличиваем массив Іоайег, включая в него новый запрос Сощеп оадег. 
Затем передаем массиву ОВГ ленты, функцию ВийаХМГЕВези[$(), форма- 
тирующую содержимое, и функцию ВиіаєЕггог (), которая будет вызываться 
в случае ошибки. Разобравшись с запуском процесса загрузки, мы можем пе- 
реходить к форматированию возвращаемых ХМГ-лент. 


Адаптация функции 


В процессе запроса мы должны вызвать либо функцию ВиахміІ Кеѕиёѕ() 
(если запрос прошел успешно), либо Ви|аЕггог () (если возникли какие-либо 
проблемы). Функция ВшіахмІ Кеѕиіѕ О принимает ХМГ-ленту и формати- 
рует ее в удобный формат. Функция ВиПаЕггог() записывает ошибку в спи- 
сок ошибок. Обе функции обновляют состояние, чтобы мы могли видеть ход 
процесса загрузки. Реализация описанной логики приведена в листинге 13.8. 


Листинг 13.8. Форматирование ХМІ-результатов в форме массива Јаха$5сгірї 


Е -опсёіоп Ви11ахміКеѕи1ёзѕ () { 
уаг хм1рос = іһіѕ.гед.геѕропѕехмі,. ЧосомепеЕ1етепе; 
уак ВУ55Т1Е1е = 
хи1Рос .десЕ1епептезВуТадМагшае ('6161е') [0].Е1узЕСЬ11а.поЧеуа1те; 
уак хВомз = хт1 рос .деіЕ1емепіѕВуТад\ате ('ібет') ; 
Рог (100; 1СХхВом$ . Іеподёһ; іС++) { 
іпіМеѕѕаде = аггаумеѕѕаде.1епоіһ; 
аггаумМеѕѕаде [іпіМеѕѕаде] = пем Аггау ( 
К5ТіЄ1е, 
хВомзЕ1С] .деёЕ1 емепіѕВуТадмате { 'біё1е') {0] 
.Еіуѕєсһі1а.поаеуаіпе, 
хВоиѕ [1С] .дееЕ1 етепеѕВуТадматме ('11іпк') [0] 
.Еігеёсһі1а, поаеуа1ое, 
хВоиѕЕ1С] .сдесЕ1емепіѕВуТадм\ате ('деѕсгірііоп'!) [0] 
.Еіуѕєсһі1а.подеуа1че) ; 
} 
Орааёеѕёаёцѕо; 























Функция ВшіахмІ.Кеѕшіѕ (), приведенная в листинге 13.8, извлекает до- 
кумент ХМІ, обращаясь к свойству гезропзеХМГ, объекта запроса. Сохранив 
документ ХМЕ в локальной переменной хтірос, мы можем получить для 
ленты информацию о названии К$5$-ленты. Для этого мы обращаемся к де- 
скриптору элемента названия и берем значение первого дочернего узла. 

Далее мы получаем элементы статей и подготавливаем цикл для прохо- 
да по полученному массиву, записанному в хКо\. Последовательно проходя 
данный массив, мы можем создать многомерный массив, сохранив его в сле- 
дующей ячейке нашего глобального массива аггауМеззазе. Этот глобальный 
массив содержит название В$55-ленты, а также заголовок, ссылку и описание 
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статьи. Указанный многомерный массив создается для каждого элемента ста- 
гьи, записанного в хКо\5. Завершив обход документа, мы вызываем функцию 
ОрааѓеЅіаѓиѕ () (листинг 13 9) для показа пользователю текущего состояния 
процесса. 


Листинг 13,9. Функция, сообщающая о ходе предварительной загрузки 
Ғопсёіоп ОрааёеЅёаіиѕ () { 
іпсіоаағі1е++; 
іЁ{іпсІоаағі1е < аггаувк55Еееаѕ.1епоіһ) { 
дӢосотепі . деї# ІемепіВутІа ("аіуМеумуѕ2") .іппегнтмі - 
"Тоааеа Е11е " + іпіІоаағі1е + " оғ " 
+ аггаукбѕЅЕееаѕ-Іепдіһ + ѕёгЕггогѕ; 
Је1ѕе іЁ(іпёІоаағі1е >= аггаукКѕЅҒЕееаѕ.1Іепоіһ && 'ЮІоадеаопсе) { 
дӢосоптепі . деёЕ1егаепЕВу1ағ"аіуМемѕ2") .іппегнтмі = 
"Тоаа1па СоюпріІеіеа" + ѕігЕггогѕ; 
іЁ{аггауМеѕѕаде.Іепдёһ == 0) 
аіегі ("Мо К$5 іпҒогтаёіоп маѕ со11есфеа."); геіигп Ёа1ѕе; 
} 


рІоайеадопсе « ёгиое; 
уаг ёіюпегх = ѕеётТітмеоиї ("СһҺапдеуіем () ", 1500); 























Как показано в листинге 13.9, функция ОрЯӣаѓеЅіаіиѕ () выполняет сле- 
дующее. Во-первых, отображает пользователю состояние объекта предвари- 
тельной загрузки; во-вторых, определяет, требуется ли начать слайд-шоу. 
Итак, прежде всего мы увеличиваем на единицу значение глобальной пере- 
менной іпіГоааЕіе, обновляя счетчик файлов. Если значение іпі оааЕіе 
меньше общего числа загружаемых файлов, для отображения состояния за- 
грузки мы задаем свойство іппегНТМІ. верхнего слоя элемента іуМъеуѕ2 рав- 
ным выходной строке. 

Если счетчик файлов больше или равен числу файлов в массиве (а слайд- 
шоу еще не запущено), тогда мы можем запускать переходы между лентами. 
Однако перед началом слайд-шоу необходимо проверить, есть ли у нас вообще 
данные для отображения. Для этого проверяется длина отформатированного 
массива сообщений аггауМеѕѕаве. Если сообщений нет, мы сообщаем об этом 
пользователю и завершаем выполнение функции, возвращая значение Ға1ѕе. 

Если имеются данные для отображения, значение БГоаадеаОпсе уста- 
навливается равным {гие и после небольшой паузы вызывается функция 
Сһапееуіеж(). Пауза нужна для того, чтобы пользователь успел прочесть 
возможные сообщения об ошибках. Как отмечалось ранее, если функция- 
загрузчик столкнется с проблемами в процессе загрузки ХМГ-документа, она 
вызовет функцию ВиПаЕггог() (листинг 13.10). 


Листинг 13.10. Обработка ошибок, сгенерированных ХМГНИрКеацез 
РАпсйоп ВоПаЕггог(){ 
ѕігЕггогѕ += "Еггог:" + "" + "<Ьг/>"; ОрааѓеЅіаіиѕ(); 
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Рис. 13.8. Функция предварительной загрузки загружает 
второй файл из четырех, что видно по сообщению о состоянии 
и отсутствию ошибок 


Функция ВиПаЕггог() позволяет отображать на экране ошибку. Таким 
образом, пользователь узнает, что были загружены не все файлы. Возникаю- 
щая ошибка просто добавляется к глобальной переменной ѕїгЕггогѕ, после 
чего вызывает функция Ордайе{а{а$ {), информирующая пользователя о те- 
кущем состоянии загрузки. Чтобы проверить, как работает функция предва- 
рительной загрузки, мы можем записать документ и открыть Уеб-страницу 
в браузере (рис. 13.8). 

Тестируя приложение, мы должны наблюдать на экране процесс обновле- 
ния состояния. На рис. 13.8 показан момент, когда функция предварительной 
загрузки загружает второй файл (из четырех) при отсутствии сообщений об 
ошибках. После загрузки всех файлов мы должны увидеть, что все они загру- 
жены успешно, а список ошибок пуст. Однако в строке состояния мы наблю- 
даем ошибку ЈауаЅсгірі, поскольку еще не создали функцию Сапе Мех). 
Мы займемся этим в следующем разделе, однако вначале создадим эффект 
затухающего перехода, работающий во всех браузерах. 


73.4. Богатый эффект перехода 


Итак, мы написали код, загружающий файлы в массив. Теперь можно взять 
данные, хранящиеся в массиве, и создать слайд-шоу, основанное на ОНТМІ. 
Изменяя содержимое элементов іу с помощью шпег НТМІ, МОЖНО отобра- 
жать различные статьи, загруженные функцией предварительной загрузки. 
Изменяя С$5-классы элементов и значение параметра 2-Іпіех слоев, можно 
создавать затухающие переходы между элементами іу. Объединив все это, 
мы сможем создать динамическое слайд-шоу с затухающими переходами. 
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13.4.1. Правила прозрачности, учитывающие 
индивидуальность браузеров 


При создании эффекта затенения необходимо изменять прозрачность верх- 
него слоя. Таким образом, мы сможем увидеть содержимое слоя, находяще- 
гося под текущим. Когда степень непрозрачности равна 0%, будет видно все 
содержимое нижнего слоя. При 100%-ной непрозрачности нижний слой со- 
вершенно не просматривается. 

Далее мы, как всегда, должны рассмотреть вопрос совместимости наше- 
го кода с браузерами Пиегпе{ Ехр]огег и МохШа. В указанных браузера! про- 
зрачность реализована по-разному, поэтому мы должны учесть эти различия. 
В МохШа применяется параметр непрозрачности (орасіѓу), тогда как в Ш- 
ќегпеї Ехр]огег используется фильтр, задающий прозрачность через значение 
параметра альфа (листинг 13.11). 


Листинг 13.11. Классы С55 фильтра прозрачности 
.орасО{орасіёу: .0;#і1ёег: а1рћһа (орасіёу=0) ; } 
.орасі{орасіёу: .2;#і1ёег: а1рһа{орасііёу=20) ; } 
.орас2 {орасіёу: .4;#і1ёег: а1рћһа (орасіёу=40) ; } 
.орасЗ{орасіёу: .6;#і1ёег: а1рћһа (орасііёу=60) ; } 
.орас4 {орасіёу: .8;#і1ёег: а1рћһа (орасііёу=80) ; } 
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В листинге 13.11 показано, что мы создали ряд правил, определяющих 
стили с различными уровнями прозрачности. Использование для изменения 
значений правил С98, а не ЈауаЅсгірі, —- вопрос личных предпочтений. При- 
меняя С55, мы можем изменять и другие свойства; возможно, вместе с моди- 
фикацией степени прозрачности нам захочется изменить цвета или увеличить 
размер шрифта. Благодаря классам С$$ мы можем обойтись без дополни- 
тельного Јауа$сгірі-кода, а также свести в одном месте весь код, учитываю- 
щий отличия браузеров. 

Завершив разработку классов, мы можем начинать процесс загрузки ин- 
формации Ҝ88-ленты в элементы іу. 


13.4.2. Реализация затухающего перехода 


Тестируя код в разделе 13.3.2, мы получили сообщение об ошибке, поскольку 
не создали функцию Сһапвеўіеу(). Эта функция инициирует процесс затуха- 
ющих переходов элементов іу с текстами статей друг в друга. Чтобы процесс 
затухания проходил верно, мы изменяем классы С55 и размещаем элементы 
іу на уровнях с разными значениями параметра 7-ш@4ех. Реализация ска- 
занного показана в листинге 13.12. 


Листинг 13.12. Функция СһапдеМіем() 
// О Объявить СһапвеУіем() 
Гипс оп СһапвеМіем(){ 
// © Отобразить название В$5-ленты 
ѕігріѕрІау - "<ѕрап с1аѕ5="В55 Еееа'>" + 
аггау Меззазе [ сиггеп{ Меззазе] [0] + "</зрап>: 
// © Показать заголовок элемента 
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ѕікрхѕр1ау += "<ѕрап с1аѕѕ='іёеттіё1е'у + 
аггаумМеѕѕаде [сиггепіМеѕѕаде] [1] + "</ѕрапхһг>"; 
// О Вставить описание статьи 
ѕікріѕр1ау += аггауМеѕѕаде [сиггепЕМеззасче] [3] 








ри" 
// © Выдать ОВЬ ленты 
ѕігріѕр1ау += "<а БгеЕ“" + 


аггаумМеѕѕаде [сиггепёМеѕѕасде] [2] + 
1 6161е='\У1ем Раде'>\У1ем Раде</а>"; 
// 0 Изменить состояние ленты 
Чосомере.чесЕ1етерЕВУуТА ( " ѕ=рапСоцпі") .іппекнтмі = 
"Меѕѕаде " + (саггепЕМеззаде+1) + 
" ОЕ " + аггаумМеѕѕасе.1епоёһ; 
уаг орјріу1 дӢосотепі . чесЕ1етепеВуТа ("91уМемз1"); 
уагх орјріу2 = аосомере.дчееЕ1етепеВу1 АЕ" Я91уМеиз2"); 
// © Подготовить переход 
іЁ (1ауегЕгопі == 1) { 
орјріу2.с1аѕѕмМате = "орасО"; 
орујріу1.ѕёу1е.х71пӣех = 1; 
оруріу2.ѕбу1е.х21пӣех = 2; 
оруріу2.іппегнНтмі_ = ѕегріѕр1ау; 
ІауегЕгопі = 2; 


} 

е1зе{ 
орјріуІі.с1аѕѕМапе = "орасо"; 
орујріу2.ѕёу1е.21паех = 1; 
орујріу1.ѕбу1е.х21пӣех = 2; 
орујріу1.іппегнНтмі_ = ѕегріѕр1ау; 
ІауегЕгопі = 1; 

} 


// © Начать переход 
и 























————————————————————————————————% 


Функция СһапғвеМіем() О служит двум основным целям. Во-первых, 
она создает НТМГ-документ для отображения данных, полученных из В$5- 
лент; во-вторых, подготавливает элементы Чу к проявлению. Создание 
НТМГ-лдоку мента выполняется просто, поскольку мы используем стандарт- 
ную структуру. Сложнее всего в этом деле гарантировать, что мы правильно 
отследили все кавычки и апострофы и не допустили ошибок. 

Первой строкой текста, которую мы собираемся отобразить, является на- 
звание канала В55 ®, которое хранится в первом элементе массива аггауМез- 
ѕаре. Это название необходимо поместить в элемент ѕрап и соотнести с этим 
элементом имя класса С5$$ К5ЗЕее4. Далее требуется отобразить заголовок 
статьи ©, обратившись ко второму элементу массива. Помещая заголовок 
в элемент ѕрап и сопоставляя с этим элементом имя класса С95 ЦешТ Ще, 
мы допускаем для заголовков определение различных стилей. Чтобы раз- 
делить заголовок и тело сообщения, между ними проводится горизонталь- 
ная черта. 

Описание статьи О было записано в четвертом элементе массива аг- 
гау Меѕѕаре. Мы отделяем это описание от следующего раздела, в котором 
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находится последний собранный элемент статьи — ссылка ©; атрибуту НВЕЕ 
данной ссылки присваивается значение элемента ОКІ. Вследствие этого поль- 
зователь видит текст "Мем Раре" ("Посмотреть страницу"), на котором он 
может щелкнуть мышью. Ссылка, привязанная к этому тексту, направит 
пользователя на №еБ-сайт К5$5-ленты. 

Далее мы хотим обновить отображаемый счетчик текущего сообщения, 
встроенный в наше Ҝ855-приложение. Для этого мы изменяем свойство іп - 
пег+НТМГ, 0 элемента ѕрапСоиопі, используя длину аггауМеззазе и счетчик 
текущего сообщения. Затем требуется подготовить элементы Яіу ® к демон- 
страции переходов. Для инициализации элемента у значение 7|п4ех зада- 
ется так, чтобы данный элемент располагался поверх текущего, а класс со- 
ответствовал первому правилу С5$, определяющему степень прозрачности. 

Загрузив текущее сообщение в элемент Чу, мы начинаем процесс про- 
явления этого элемента. Для этого необходимо создать функцию, последо- 
вательно загружающую классы С55; следовательно, мы вызываем функцию 
ЅеїС1аѕ50 ©. 


13.4.3, Интеграция таймеров Јауабсгірі 


Процесс загрузки элемента іу в поле зрения создает не резкую смену со- 
общений, а плавный переход между ними. Данный эффект достигается по- 
средством изменения степени прозрачности слоя с помощью созданных ранее 
классов С55. Благодаря этому мы можем наблюдать слой, располагающий- 
ся ниже данного (мы как бы смотрим сквозь тонированное стекло). Чтобы 
убрать из поля зрения все содержимое нижнего слоя, мы уменьшаем степень 
прозрачности верхнего. 

Как отмечалось в разделе 13.4.1, для обработки затухания/проявления 
слоев мы применяем пять классов С55. Использование классов позволит нам 
впоследствии добавить к переходу изменение цвета или любую другую моди- 
фикацию стиля. В данном случае, как показано в листинге 13.13, мы просто 
циклически проходим по классам. 


Листинг 13.13. Задание класса С55 и эффекта перехода 
// О Объявить ЅеС1аѕѕО 
Ғопсііоп  ЗеСП!аз$$(хСТаз$) { 
// © Проверить шаг перехода 
1 СхС1а$$<5) { 
// © Установить следующее значение с1а55 Мате 
аоситепі.веїЕІегаепіВу1Іа("аіуМемѕ" + 
// О Инициализировать таймер перехода 
1ауегЕгоп{).с1аз$Маше = "орас" + хС!а$$5; 
ИтегАт( = ѕеТітеоиї("ЅеїС1аѕѕ{" + 
(хС1аѕ5+1) + ")", ишеСо1Тог); 





} 
е15е{ 
// © Убрать класс С88 
Чоситеп(. веі Е|етеп(ВУ[А ("41у Мемз" 
+ ІауегЕгопї).с1а55 Мате = ""; 
// О Увеличить счетчик 
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сиггепЕМеѕѕаде++; 
// © Проверить следующ сообщени 
ТЕ (соиггепЕМеѕѕасде>=аггаумеѕѕаде.1епоіһ) 
сиггепЕМеззаае -— 0; 
// © Запустить таймер 
1Е (ТЬРацзеа) 
С1мегбм1есВ = ѕеётітеоиі ( 
"СБРапае\У1ем () ", Ё11рІеподіёһ) ; 








В листинге 13.13 показана функция Ѕеїсіаѕ5() О, которой передается 
параметр хС1а5$. Этот параметр позволяет отслеживать текущее состояние 
перехода, не используя никаких других глобальных переменных. Указанная 
функция вызывается на каждом шаге перехода и обновляет состояние, пока 
переход не будет завершен. 

Поскольку мы работаем с пятью классами С$$, необходимо убедиться, 
что текущий шаг процесса перехода © не является пятым. Если это так, зна- 
чит, для завершения перехода требуется применить еще один или несколько 
классов С5$, и мы применяем к элементу следующий класс С$$, обращаясь 
к атрибуту с1аѕ$ Мате ©. 

Установив новый класс, необходимо создать таймер для вызова следующе- 
го шага. Используемый для этого метод ѕеТітеоиѓ О имеет два параметра. 
Первый — это функция или выражение Јауа$сгірі, которое требуется выпол- 
нить, второй — время в миллисекундах до выполнения функции/выражения. 
В данном случае мы планируем вызвать функцию Зе С]аз$ (), в качестве ар- 
гумента которой передается параметр состояния, значение которого увеличе- 
но на 1. Время ожидания задается согласно значению глобальной переменной 
Г1рГепе{, объявленной в разделе 13.3.1. 


В ветке еІѕе сценария обрабатывается ситуация, когда мы уже прошли 
по всем пяти классам С$$, последовательно применив их к элементу іу. 
Здесь мы вначале убираем из элемента іу класс С5$ ©. Параметр непро- 
зрачности элемента устанавливается равным 100% (значение по умолчанию); 
таким образом, мы разрешаем элементу іу полностью закрывать другой 
блок, расположенный на нижележащем слое. 


Далее мы увеличиваем на 1 значение переменной сиггеп(Меззазе ©, поз- 
волив загружать следующее сообщение. Мы проверяем, чтобы номер это- 
го сообщения © был больше числа сообщений, содержащихся в массиве 
аггауМеѕѕаве. Если это так, мы запускаем с начала текущее сообщение. Тай- 
мер перезапускается, чтобы загрузить следующее сообщение по прошествии 
заданного промежутка времени ©. За вызов функции СћапвеМіем() отвечает 
метод зе{Титеой, а время ожидания определяется глобальной переменной 
#ірІепеіһ. Чтобы все сказанное было возможным, мы должны проверить, 
что значение глобальной переменной БРаџѕеа не равно їгие. Подробнее ко- 
дирование паузы будет рассмотрено в разделе 13.5.2. 


Теперь переход между сообщениями готов, и мы можем проверить создан- 
НЫЙ сценарий. Если все работает нормально, мы должны увидеть счетчик 





Рис. 13.9. Затухающий переход между сообщениями 5 и 6 


загруженных страниц, плавно увеличивающийся по мере загрузки файлов 
в сценарий, а первое загруженное сообщение должно начать проявляться. 

Как видно на рис. 13.9, сценарий содержит два сообщения, поскольку 
одно из них немного прозрачно. Текущее сообщение (6) отображается в заго- 
ловке, и мы видим, что всего загружено 31 сообщение. Все, что нам осталось 
сделать, — это добавить кнопки паузы, перехода назад и вперед, а также 
связать с ними соответствующие функциональные возможности. 


13.5. Дополнительные возможности 


Написанный нами код уже можно использовать, все дополнительные функ- 
ции не являются обязательными, хотя они и могут сделать сценарий более 
гибким для пользователей (да и для нас тоже). Итак, прежде всего мы доба- 
вим функцию, которая позволит импортировать дополнительные К55-ленты. 
не включенные в функцию предварительной загрузки. Возможно, мы хотим 
время от времени проверять какой-то сайт на наличие нового содержимого 
или добавить в приложение К$5-ленту с прогнозом погоды. Указанная воз- 
можность позволит получать ленту тогда, когда она нам потребуется. Кроме 
того, мы добавим возможность пропускать сообщения и приостанавливать 
их, если для прочтения требуется больше времени. 


13.5.1. Введение дополнительных лент 


Добавить дополнительные сообщения в ленту легче, чем вы могли подумать. 
Вернемся к рис. 13.9. Список содержит имена и ОВГ дополнительных лент, 
которые нам требуется проверять эпизодически; потом мы просто выбираем 
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имя и щелкаем на кнопке Ада Еееа ("Добавить ленту"). Большинство необхо- 
димых функциональных возможностей было реализовано в разделе 13.3; все, 
что от нас требуется сейчас (листинг 13.14), — запустить объект Сощев- 
Гоа4ег, который и добавит ленту, выбранную в элементе ѕе1есі. 


Листинг 13.14. Функция Чауа$спйрь, загружающая дополнительные ленты В$5 
Ғопсёіоп ГоаЯМемз () { 
уаг ѕе1і = аосомепе.Еоги1 .аа1855; 
ТЕ (ѕе1,орё1іопѕ [ѕе1.зѕе1есёеа1ї1паех] .с1аззМаше ! ="аааеа" ) { 
уаг игі = ѕе1.орііопѕ [ѕе1.ѕеіесіеа1паех] .уа1ае; 








ѕе1.орііопѕ [зе1.зе1ессеЯ1паех] .с1аззМаще="аааеа" ; 
уаг Іоайегі = пех пее.СопбепЕГоааех (игі, 
Воиі1ахміВКеѕи1ёѕ); 











В приведенном листинге показана функция Гоа@Ме\з (), которая запус- 
кается щелчком на кнопке БќпАаа. Поскольку указатели ЧКГ дополнитель- 
ных лент К55 мы получаем из элемента ѕе1есі, нам необходимо обращаться 
к значениям элемента 4918 5$. 

Если мы собираемся добавлять К$55-ленты из элемента ѕе1есі, необходи- 
мо учесть возможность того, что эта лента уже добавлена. Одним из возмож- 
ных решений здесь является добавление к опции класса С$5. Таким образом, 
в приложение необходимо включить проверку, гарантирующую, что лента 
К55 не была добавлена ранее. Если лента действительно является новой, мы 
берем значение выбранной опции и изменяем значение сІаѕ$ Мате на аадеа. 

При выполнении объекта Соп{еп оа4ег мы передаем ему в качестве ар- 
гументов ОВГ ленты и функцию Вишіахмі.Кеѕиёѕ (). Если в процессе про- 
изойдет какой-либо сбой, мы можем использовать принятое по умолчанию 
сообщение об ошибке объекта Сомеп оадег. Таким образом, сейчас мы мо- 
жем загружать документ из списка, но, кроме того, нам требуется предусмот- 
реть введение в этот список новых К98-лент и связать с кнопкой обработчик 
событий, приведенный в листинге 13.15. 


<зе]ес{ пате="418$5"> 


<оріоп 
уаіџе="һіїр://гааіо .јауагапсһ.сот/Ёгапк/гѕѕ.хті"> 
Егапк</орііоп> 
<оріоп 
уаіџе= "һр: //тайіо .јауагапсһ.сот/ріћоивһі/т55.хті" > 
Сгевв</оріоп> 
</ѕеІесї> 


<триі ќуре="Бийоп" пате="ЫпАаа" 
уаџе="Ааа Еееа" опсіск="Гоаамеуѕ()" /> « 
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Рис. 13.10. В приложение чтения В$$-лент добавлена новая лента 


С помощью данного списка мы добавляем указатели ОВГ на ленты В5$$, 
не содержащиеся в предварительно загруженном массиве К55-лент. В дан- 
ном случае мы добавили две К55-ленты из радиоблога ЈауаҜапсһ. К кнопке 
БАаа был добавлен обработчик событий опсПсКк, позволяющий выполнить 
функцию Іоаймемѕ (). Последним этапом загрузки дополнительных лент яв- 
ляется создание класса С$$, добавляемого в таблицу стилей. Благодаря этому 
пользователь может увидеть, что лента загружена. 


.а4де4{БасКэгоипа-со]ог: зПуег; } 


В приведенный класс С55 мы можем добавить любое правило С$5, позво- 
ляющее отличать добавленные ленты от всех остальных. В данном случае мы 
изменили цвет фона опции на серебристый, так что теперь эта опция визу- 
ально выделяется из списка. Добавив класс, мы снова можем протестировать 
полученное приложение. 

Как показано на рис. 13.10, мы добавили В55-ленту с пометкой ЕгапКк (она 
обозначена серебристым цветом). Лента, помеченная как Огезе, еще не до- 
бавлена, поскольку ее цвет является принятым по умолчанию белым цветом 
фона. Кроме того, после добавления ленты число сообщений в приложении 
увеличилось с 31 до 54. Уже почти все готово. Осталось добавить кнопки 
"Вперед", "Назад" и "Пауза". 


13.5.2. Интеграция функций пропуска и паузы 


Одной из наиболее полезных дополнительных возможностей является про- 
пуск сообщений. Если нам попадается сообщение, которое нас не интересует, 
мы щелкаем на кнопке пропуска и смотрим следующее, не ожидая, пока до 
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него дойдет очередь. Функция паузы позволяет приостановить работу прило- 
жения, чтобы мы могли не торопясь прочесть заинтересовавшее нас сообще- 
ние. Поскольку для представления таймеров, паузы и счетчика сиггепіМеѕ- 
ѕаве используются глобальные переменные, мы очень просто можем влиять 
на текущее состояние приложения. В листинге 13 16 показан код, позволяю- 
щий пользователю быстро проходить по лентам. 


Листинг 13.16. Функция Јамабсгірї, отвечающая за остановку и пропуск лент 
//О Создать функцию МоуеЕееа () 
Ғопсёіоп МоуеҒееа {хОріёіоп) { 
// @ Определить, требуется ли приостановка или возобновление работы 
ТЕ (хОрііоп == 0) { 
// © Приостановить работу 
1Е (ІрРаџоѕеа) { 
ЪРаозеа • Егое; 
ТЕ (С1мехг$м1 есь) 
с1еагтіпмеоиї (ёіютербиіёсһ) ; 
дӢосотепё .дееЕ1 емепёВута{ "репРаџѕе") .уа]ае = "ВЕЅОМЕ" 
} 
// // О Возобновить работу 




















е1 зе ( 
рРацѕеа = Ғаіѕе; 
ѕзеёТтітеоиї ("Сһапдеуіеи() ", 300); 
дӢосотепё . дееЕ1 емепёВута ("репРацџѕе") .уа1ае • "РАОЅЕ" 





} 

} 

// 0 Изменить текущ сообщени 

е1зе{ 

1Е (ЕімегуіЄсһ) 
с1еагтітеоиѓ (Е 1мегби1еср); 

1Е (хОрЕе1оп "*“ -1) саггепЕМеззаае += -2; 

1Е (соиггепЕМеѕѕаде < 0) 

соггепЕМеѕѕаде = аггауМеѕѕаде. 1еподёһ 
+ соиггепЕМеѕѕаде; 

СҺапдеуіе() ; 

} 








Создав функцию МоуеҒееа () О и позволив ей принимать в качестве аргу- 
мента единственный параметр, мы сможем обрабатывать три ситуации: па- 
узу, перемотку вперед и перемотку назад. Чтобы различать действия мы 
можем использовать целочисленное значение. Чтобы приостановить работу 
приложения, мы будем передавать функции МоуеЕееа () значение 0, чтобы 
перейти на следующее сообщение — значение 1, а чтобы перейти не преды- 
дущее сообщение — значение — 1. 

В приведенном коде мы вначале проверяем условие паузы — равенство ну- 
лю аргумента функции © Кнопка паузы отвечает за два действия — приоста- 
новку работы приложения (прекращение выполнения переходов) и возобнов- 
ление работы (продолжение слайд-шоу с переходами между сообщениями). 

Если в текущий момент лента не приостановлена ©, тогда значение пере- 
менной БРаџѕеа необходимо установить равным їгие и проверить, запущен ли 
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таймер Итегэ\уисВ. Если да, то мы должны его сбросить, используя метод 
сІеагТітеоиі. Далее текст кнопки изменяется на "КЕЗОМЕ". Если на кнопке 
щелкают для того, чтобы возобновить работу, мы должны выполнить про- 
тивоположные действия О. Значение переменной БРаизе4 устанавливается 
равным #а1ѕе; мы вызываем функцию СһапееМіе() с небольшой задерж- 
кой во времени и изменяем текст кнопки на "РАОЅЕ". 

Все Работу с паузой мы завершили. 

Теперь необходимо создать функции пропуска сообщений и возврата 
к предыдущим сообщениям ©. Поскольку при этом мы будем изменять отоб- 
ражаемые статьи, необходимо убрать таймер, чтобы избежать проблем с про- 
пуском нескольких сообщений. После этого требуется проверить, не равен ли 
параметр действия —1. Если мц возвращаемся к предыдущим сообщениям, 
из значения переменной сиггепіМеѕѕаве необходимо вычесть 2. Это происхо- 
дит из-за того, что переменная сиггеп{Меззазе в действительности содержит 
номер следующего сообщения, поскольку ее значение уже было увеличено 
на | Вычитая 1 из значения переменной, мы получаем то же самое сообще- 
ние. Следовательно, поскольку в переменной сиггепіМеѕѕаве уже хранится 
номер следующего сообщения, при реализации кнопки перемотки вперед нам 
ничего не нужно делать. 


Затем нам необходимо убедиться, что значение переменной не меньше 
нуля. Если оно меньше нуля, значение переменной нужно установить соглас- 
но последнему сообщению в массиве. Изменив значение сиггепіМеѕѕаве, мы 
можем вызвать функцию СһапрвеМіеу{) для загрузки сообщения. Все, что от 
нас требуется, — добавить обработчики событий к кнопкам (листинг 13.17), 
чтобы мы могли выполнить функцию МоуеЕееа (). 


Листинг 13.17. Обработчики событий опсИсК для действий с кнопками 


уаіие=" <ВАСК " опсИск=" МоуеЕееа{-1)"> 
уаіие=" РАОЅЕ " опс1ск=" МоуеЕееа(0)"> 
уаше="МЕХТ>" опсИск=" МоуеЕееа(1)"> — 


Для инициализации функции мы добавляем к кнопкам обработчики со- 
бытий опсііск. Эти обработчики вызывают функцию МоуеЕееа(), которая 
принимает в качестве аргументов такие значения: -1 — вернуться к преды- 
дущему сообщению; 0 — приостановить работу, | — перейти на следующее 
сообщение. Чтобы проверить работу функций, мы сохраняем документ и от- 
крываем данную страницу в браузере. 

Теперь, когда мы можем пропускать сообщения, можно легко перейти 
к сообщениям в середине списка К88-ленты. На рис. 13.11 показано, как 
выглядит приложение при нажатой паузе: на кнопке БпАаа отображается 
надпись КЕЗОМЕ ("Возобновить"). Таким образом, используя описанные в 
разделе дополнительные функции, мы получаем приложение, позволяющее 
читать К$5-ленты на рабочем столе, не посещая М№МеБ-сайты, поставляющие 
эти ленты. 





Рис. 13.11. Работа показанного в окне приложения чтения 
В55-лент приостановлена, поскольку центральная кнопка 
имеет название ВЕЗУМЕ 


13.6. Как избежать ограничений проекта 


С помощью основанного на Ајах приложения мы можем читать К55-ленты 
из НТМЕ-файла, записанного на рабочем столе, не требуя серверного кода. 
Данное приложение можно использовать для захвата К55$-лент без посещения 
соответствующих МеБ-сайтов. Мы можем предложить посетителям нашего 
У\еБ-сайта загрузить данную НТМГ-страницу, настроив ее на чтение В55- 
лент этого сайта. Поскольку представленный сценарий можно запустить и на 
самом У\!еБ-сайте, его можно использовать и для других целей. Например, это 
может быть переключение рекламы в баннере, баннер новостей компании или 
все, что мы можем придумать. Однако представленный сценарий обладает 
определенными ограничениями; кроме того, при его запуске на рабочем столе 
с помощью браузера Мо7Ша могут возникнуть определенные проблемы. 


13.6.1. Обход системы безопасности браузеров Мо2Иа 


В отличие от Мсгозой Пиегпе ЕхрІогег, браузеры Егеѓох и Мо7Ша не поз- 
воляют запускать созданное приложение с рабочего стола из-за встроен- 
ных ограничений безопасности. Данные ограничения не дают Ајах общаться 
с другими УеБ-сайтами, поскольку направлены на то, чтобы код не мог от- 
правлять информацию без нашего ведома. 

Чтобы убедиться, что проблема работы сценария связана именно 
с этим, необходимо исследовать сообщение об ошибке. В браузере МохШа 
мы должны открыть консоль Јауа$Ѕсгірі, вызываемую из меню Тоо!5 = 
У реуејіортепі =Ф Јауа$сгірі СопѕоІіе (Инструменты => МеБ-разработка 
=Ф Консоль Јауа$сгірі) (рис. 13.12). 
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Рис. 13.12. В браузере Моа 
выберите Тоо1$ => УМ 
"ЮеуеІортепі => 
ЈауаЅбсгірг Сопѕо1е 
(Инструменты =^ 
\Уеъ-разработка => 
Консоль ЈауаЅсгірії) 


Рис. 13.13. Сообщение об ошибке 
"недостаточно полномочий", 
порожденной объектом 


ХМЕНИрКеацез( 





Выбрав команду ЈауаЅсгірі Соп$ое (консоль ЈауаЅсгірі), мы откры- 
ваем дополнительное окно (рис. 13-13). 

На рис. 13.13 показана ошибка "регтіѕѕіоп еше" ("недостаточно полно- 
мочий"), порожденная объектом ХМЕНирКедие$. Исправить ее можно дву- 
мя способами. Например, можно открыть конфигурационный файл браузера 
МохШа и изменить настройки разрешений, позволив объекту ХМЕНиИрКеаие“ 
выполнить то, что он хочет. Для этого в адресной строке браузера следует 
ввести абон: сопѓ 1 и изменить необходимые настройки, однако данные дей- 
ствия небезопасны. 

Небезопасность изменения настроек связана с тем, что наши разрешения 
касаются всего, что происходит на компьютере. Это означает, что любой сце- 
нарий, желающий связаться с внешним миром, сможет это сделать. Как этого 
можно избежать, разрешив данное общение только нашему сценарию? В ка- 
честве решения мы можем установить безопасность с помощью ЈауаЅсгірі. 
О том, как это сделать, при условии, что браузер настроен на обработку за- 
просов к РгіуПереМапарег, мы рассказывали в главе 7. Напомним кратко, 
о чем идет речь. В листинге 13.18 показан общий код, который предоставляет 
дополнительные привилегии, требуемые для чтения внешних ресурсов. 


.:. Листинг 13.18. Управление привилегиями Зесищу Римеде Мападег 
і{міпаом.пеїѕсаре && 
уіпаож.пеіѕсаре.ѕесигіїу. Ргіуі еве Мапавег.епа еРпуезе) 
пеіѕсаре.ѕесигіїу. РгіуевеМапавег. епаБ1еРгіуіеве( 
'"ОпіуетгѕаІВгомѕегКеаа ); — 


В приведенном коде проверяется, можем ли мы обращаться к РиуПезе- 
Мапазег. Если да, тогда мы получаем привилегию шуегза|Вто\узетВеаа. 
Данный код необходимо добавить в два различных места объекта Сопќепі- 
Гоайег, отвечающего за функциональные возможности Ајах. 

Вначале мы должны вставить указанный код сразу после объявления 
юа@ХМТ.Оос, как показано в листинге 13.19. 


Глава 13 Создание приложений Ајах, не использующих сервер 547 


Рис. 13.14. Запрос, требующий от 
пользователя подтвердить 
изменение прав доступа 





Листинг 13.19. Вставка "кода т функцию юаахХМЕ.ос 


пе .СопёепіІоайег.ргоёоёуре.1оаахмірос = Ёџпсііор ( 
ог1,пеєһоа, рагамз , сопіепіТуре) { 
1Е (м1паом.пеЕзсаре && 
мтіпаот. песѕсаре . ѕзесигііу.Ргіуі1едемМапасег.епар1ерРгіуі1есе) 
пеіѕсаре.зѕесигііу.Ргіуі1есдемМападег.епар1ерРгіуі1еде ( 
"Опіуегѕва1ВгомѕегВеаӣ!) ; 








Кроме того, код необходимо вставить в функцию опКеаду${айе (ли- 
стинг 13.20). 


Либтинг 13.20, Вставка кода в функцию опКеаду{а(е имя 
пе. Сопѓіепіоайег.опКеайуЅѓаѓе=Ғипсііоп()! 


1Е (м1паом.пебзсаре && 
міпаоу . пеёѕсаре.зѕесигіёу 
.Ргіуі1едеМапасдег.епаріерРгіуі1еде) 
пеіѕсаре.зѕесигііу.Ргіуі1едеМападег 
.епар1ерРгіуі1еде (' 
Ор1уегза1ВгомзегВеаа'); д 





Обе указанные функции взаимодействуют с данными из внешнего мира. 
Именно поэтому мы должны ввести обозначенные фрагменты в обоих ме- 
стах. При выполнении сценария мы получаем сообщение-запрос, требующее 
подтверждения изменений настроек безопасности (рис. 13.14). 

Если просто щелкнуть на кнопке АПо\ (Разрешить), запрос будет от- 
крываться при каждом вызове функции. Чтобы избежать этого, необходимо 


548 Часть М. А/’ах в примерах 


установить флажок Кететбег {61$ 4ес1$1оп ("Запомнить мой выбор"). Та- 
ким образом, браузер запоминает ваш выбор и позволяет выполнять объект 
ХМІНірКедиеѕі без запроса подтверждения. 

Изменив настройки безопасности браузера, мы можем запустить прило- 
жение на рабочем столе, используя браузеры Мо7Ша, ЕшеЮх и Ме5саре. Ис- 
пользуя данное приложение, мы можем обращаться к ХМ1^лентам с любого 
сайта, не открывая несколько закладок или окон. Кроме того, приложение 
можно изменить, чтобы оно получало из Мер другую информацию, напри- 
мер, прогноз погоды и комиксы. 


13.6.2. Изменение масштаба приложения 


Наше приложение может не только читать ХМГ-ленты, извлекаемые с раз- 
личных сайтов. Мы легко можем использовать его как переключатель ре- 
кламных объявлений в баннере, сценарий обновления новостей компании, 
календарь событий и многое другое. 

Например, мы можем хранить баннерную рекламу в документе ХМГ. Та- 
ким образом в ХМГ-файл легко ввести новую рекламу, не затрагивая НТМГ- 
файлы или серверный код. Мы можем предварительно загрузить баннерную 
рекламу, а затем отобразить ее в нашем приложении. Вместо того чтобы на 
экране находился один рекламный ролик, мы можем циклически менять их, 
пока пользователь изучает сайт. 

Мы можем поместить в ХМГ-документ новости компании, чтобы отоб- 
ражать текущие статьи сотрудникам или клиентам. Все, что от нас требует- 
ся, — это заполнить стандартные элементы ХМГ-ленты. Кроме того, можно 
отображать информацию об обновлении сайта или любые другие данные. 
Как видите, возможности приложения не ограничиваются простым чтением 
ХМГ-лент. 


13.7. Реструктуризация 


Итак, мы получили готовый сценарий для чтения К55-лент и можем, как 
обычно, заняться его улучшением. Как отмечалось ранее, существуют бога- 
тые возможности расширения сценария с точки зрения представления раз- 
личных типов содержимого. В данном разделе мы сфокусируем внимание 
на реорганизации сценария согласно архитектуре "модель-представление- 
контроллер" (МоаеІ-Міем-СопігоПег — МУС). Как объяснялось в главах 3 
и 4, МУС широко распространена и позволяет разделять обязанности между 
различными фрагментами кода. Свое обсуждение мы начнем с определения 
типов моделей, затем создадим представление модели и разработаем контрол- 
лер, связывающий в единое целое все компоненты. 
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13.7.1. Модель приложения 


Разработанное выше приложение чтения В55-лент очевидно только выиг- 
рает от наличия нескольких типов модели. Благодаря этому программное 
обеспечение будет концептуально понятнее, его станет легче использовать 
и модифицировать. Поскольку приложения Ајах возлагают более интенсив- 
ную нагрузку на ОНТМГ-код клиента, чем традиционные УеБ-приложения, 
важность понятного управляемого кода становится первостепенной. Классы 
модели, которые мы собираемся разработать, должны быть в общем случае 
применимы и к другим приложениями, работающим с К$5-лентами. Чтобы 
немного упростить синтаксис кода, для определения типов мы, как и в гла- 
ве 10, будем использовать библиотеку Ргоќѓоїуре. 


Начнем с определения класса модели для ВК55-ленты. В данном случае 
В$55-лента представляет собой ХМГ-документ, обладающий предопределен- 
ной структурой и имеющий ОВГ, задающий путь доступа к этому докумен- 
ту. Основными атрибутами структуры являются название, ссылка и описа- 
ние, кроме того, как обсуждалось выше, имеется множество дополнительных 
атрибутов. Кроме того, лента содержит несколько элементов Иет, которые 
можно рассматривать как набор статей. Для начала давайте соберем все, что 
мы знаем о ленте, в такой форме, как показано в листинге 13.21. 


Листинг 13.21. Класс молели КЕ *.^ДВИЯДЦ^И^^ИЭД^^^^Р 
55% = Сіаѕѕ. ат 
КЅЕееар БО 
іпібаПле; Юосбоп( ие, Пак, аеѕсгіріоп ) { 

15.00е - Ие; 

{ріѕ.іпК = ШиК; СЕЕ 

(015. Чезсириоп = аеѕсгіріоп; 

{615.Цета$ = []; 


ааа] ет: Ёџпсёіоп (ап16 ем) { 
ЕҺіѕ.1ібегпѕ.риѕһ (ап1$ем); } 


В приведенном коде тип КЅ85Еееа определяется посредством функции 
С1Іаѕѕ.сгеаѓе() библиотеки Ргофо‘уре. Напомним, что, используя эту иди- 
ому, мы с помощью сгенерированного конструктора вызываем метод іѓпі - 
{1а117е. Таким образом, при данном определении класса модели К58-ленты 
ленту можно создать с помощью следующей строки кода: 

уаг гѕѕЕееа = пем В55Еееаї ']ауаКапсЬ Ме\мз’, 

'БИр://гаЧ1о.длауагапсв.сот/пемз/", 
'"Ѕгогіеѕ бот агоџпа {ће гапсһ' ); 

По сути, это все, что требуется для определения объекта модели КЅ8Еееа. 
Обратите внимание на то, что КЅ85Еееа имеет АРІ аайіїет, разрешающий 
добавление статей к исходному массиву элементов. Каждая статья должна 
представлять собой объект модели, который инкапсулирует атрибуты каж- 
дого элемента ленты. Вспомнив все, что мы знаем о статьях К55, можно 
определить класс модели статьи, как показано в листинге 13.22. 
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Листинг 13.22. Класс модели АЗЗНет 


ВстЕеем = С1аз$.скеаее(); 
В551еем.рхобобуре = { 
10161а112е: ЕапсЕ1оп( үуѕѕЕееа, &161е, 1іпк, ЯЧезсу1рЕ1от ) { 
С51$.хззрееа = тззРееа, - 
©61$.6161е = ёіб1е; 
еҺіѕ.1іпк = 1іпк; 
Ссһіѕ.аӢеѕсгірёіоп = Яеѕсгірііоп; 
; 


у 


0н В 





Ничего особенного. В элемент статьи инкапсулированы атрибуты їі(1е, 
ак и аеѕсгірііоп, кроме того, имеется ссылка на объект К55Ғееа, к ко- 
торому относится статья. Изучая два описанных класса, видим, что статью 
и одну из лент можно сформировать следующим образом: 

уаг гѕѕҒееа = пем КббЕееа( 'ЈауаКапсһ Мемз', 

"Һер: //гадіо.јауагапсһ.сот/пемѕ/', 
'ЗЕог1ез Егош агоџпа ёһе гапсһ' ); 
уаг Ёееаї = пет Кӧ5Ібем( гѕѕҒееа, 
"іп а сору оЁ ЈВоѕѕ', 
"Һер: //тааіо.јауагапсһ.еот/пемѕ/05 /07/20/9.һіті', 
'Техі оғ Агііс1Іе' ); 

г55 Нее .аа4 1егп (Гееа1); 

Пока что все хорошо. Модель является довольно прямолинейной инкап- 
суляцией атрибутов В55-ленты и ее статей. Данные концепции инкапсули- 
руются в двух классах модели —- КЅ85Еееа и К55[ќёет. Далее мы рассмотрим 
собственно построение модели. Мы знаем, что эти объекты будут обработаны 
в результате загрузки ХМІ -данных клиенту в ответ на запрос Ајах. Поэтому 
мы определим программный интерфейс, вызывая который наш обработчик 
Ајах сможет преобразовать ХМГ-отклик в экземпляр класса модели К8Еееа. 
Для этого мы определим вначале контракт процесса, формирующего модель. 





уаг гззРееа = КѕѕҒееа.расѕехмі { гүѕѕхмі ); 


Данный контракт подразумевает, что мы передаем ХМГ-отклик, возвра- 
щаемый обработчиком Ајах, методу синтаксического разбора нашего прило- 
жения КЅ85Еееа; в результате мы должны получить экземпляр ҜЁЅ8Еееа. Бу- 
дем придерживаться сказанного и реализуем метод рагзеХМГ(), как показано 
в листинге 13.23. 


Вбскееа .рагзехмГ = Ёџопсіёіоп (хи1Рос) { 

уаг гззЕееа = пем ВбЕееа ( 
КоѕҒееа.сдеёЕігѕёуа1џе (хи1Рос, '6161е'), 
ВсЕееа. чес Е1узЕ\Уа1 ое (хті рос, '1іпк' ), 











ВсЕееа. чееЕ1узЕ\Уа1 ое (хи1Рос, 'еѕсгіріёіоп')); 
уар Ғееаіёетѕ = хи1Рос.чесЕ1етеп® ВуТадМаме ('16ет'); 
Ғог ( уаг і = 0 ; і < ҒеедӢїіёетѕ.1еподёҺ ; 1++ ) { 
тззРееа. ааа] етп (пем В$516ем(гззРгееа, 
КЅҒееа.деёЕігѕёуУа1пое (ҒЁееаіёетѕ [1], '6161е'), 
КЅҒееа.деёЕігѕёуУа1пое (Ёееаіёетѕ [1], '1іпк' ), 
КЅҒееа.деёРігѕёуа1пце (Ғееа1ёетмѕ [1], 'ӣеѕсгірёіоп')) 
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} 


геагп гѕѕ Бееа; 


} н 





Приведенный метод выполняет классический разбор ХМГ-отклика, с ко- 
торым вы уже неоднократно сталкивались. Метод принимает значения эле- 
ментов 11е, ПпКи ӣеѕсгірііоп, используя их для создания К55Еее4. Затем 
ои последовательно проходит по всем элементам Иет, выполняя эти же дей- 
ствия и создавая для каждого элемента экземпляр К585[ќёет. На каждой ите- 
рации используется метод аа4ИетО, добавляющий статью к родительской 
К55-ленте. Обратите внимание на использование вспомогательного метода 
для получения значения узла первого дочернего элемента с данным именем 
дескриптора. Данный вспомогательный метод хе Е1т5{Уае показан в ли- 
стинге 13.24. 


Листинг 13.24. Вспомогательный метод синтаксического разбора 


В55Еееа.се1Е1т${Уаше = Ғипсііоп(еіетепі, ќав Мате) { 
уаг сһіагеп = еіетепі.ѕеіЕІетепіѕВуТаг Мате({а Мате); 
И { сЬПагеп == па [| сВПагев, [еп = 0 ) 

геаги ""; 

Е ( спИдгеп[О]-Ятз{СЬИа && 
спПагеп[ О]. г СВИ9.поде\Уаше ) 
геїигп сВИагеп[О]. т СЬПа.поде\Уаше; 


геаги ; 





Это все, что нам требуется с точки зрения модели. Очевидно, мы мо- 
жем добавить атрибуты, представляющие все необязательные элементы К55- 
ленты, и присвоить им значения, если эти элементы присутствуют в ленте. 
В данном случае нам это делать не нужно, поскольку приложение чтения 
В55-лент не использует дополнительные атрибуты (и не требует их предо- 
ставления). Тем не менее возможность предоставления дополнительных ме- 
таданных существует. Кроме того, мы можем определить методы, предлага- 
ющие более формальный контракт доступа к атрибутам. Например, мы мо- 
жем написать пару ге Т!е( ) /ѕеїіТі1е(), предназначенную для доступа 
к атрибуту заголовка. Поскольку Јауа$Ѕсгірі, в отличие от других объектно- 
ориентированных языков, не поддерживает визуальную семантику (напри- 
мер, ключевые слова ргіуаѓе/ргоїесіеа в Јауа), мы этим вопросом зани- 
маться не будем. Итак, с моделью мы закончили, переходим к представлению. 


13.7.2. Представление приложения 


Разобравшись с классами модели, мы можем рассматривать класс представ- 
ления. Мы можем разработать один класс представления для КЅ8Еееа, а дру- 
гой — для К55[ќет, но поскольку приложение КЅ5Кеайег в действительности 
не представляет ленту независимо, мы определим один класс представле- 
ния КЅ85ќетмМіеу, который инкапсулирует представление К55Цет в контек- 
сте родительского элемента КЅ5Еееа Поскольку в данном случае представ- 
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ление — это НТМГ-код, наш класс представления отвечает за генерацию 
НТМЕ-страницы. Итак, рассмотрим для начала конструктор, представлен- 
ный в листинге 13.25- 


Листинг 13.25. Класс представления А5ЗЦет\Лем 
В$5Иет\Ме\м = С1аѕѕ.сгеаїе(); 
В55 Нет Мле\у.ргототуре = { 
іпіїіаіілхе: ГапсНоп(т$$Цет, Ғееаіпаех, Иетш4ех, патЕееа$) { 
һіѕ.гѕ511ет = г$5Цешт; 
{615.Гее4|паех • Гее4тадех + 1; 
(01$. Цет|пдех = Цеш!паех + 1; 
(015$. пи Ееейѕ = пит Ееейѕ; 


Ь 
} 





Давайте внимательно рассмотрим параметры. Первый параметр — эк- 
земпляр К$55Шет. С его помощью мы сообщаем представлению, для какого 
экземпляра модели обеспечивается это представление. Обратите внимание на 
то, что в общем случае классам модели не разумно знать что-либо о представ- 
лении, однако представление по необходимости имеет детальные знания о мо- 
дели. Другие параметры обеспечивают некоторый дополнительный контекст 
для представления. Параметр Ѓеейіпаӣех сообщает представлению номер лен- 
ты. Параметр Цет!п4ех указывает представлению, где размещается данная 
статья в родительском массиве статей К55Еееа. Параметр питЕее$ сообщает 
представлению, сколько всего лент. Все указанные параметры необходимы 
для получения информации о месте данного представления в мире. Пред- 
ставление может пожелать отобразить область содержимого, указывающую, 
например, "это лента 1 из 7 и статья 3 из 5". Данные атрибуты можно внед- 
рить в модель, однако в действительности они не являются атрибутами, за 
которые в общем случае должна отвечать модель, поэтому этот контекст (тре- 
буемые представлению) передается клиентом в конструктор представления. 

Как отмечалось выше, представление отвечает за генерацию НТМГ-кода. 
Поэтому нашему классу представления понадобится еще один метод. Посмот- 
рим, как это он выглядеть (листинг 13.26). 


Листинг 13.26. Метод генерации НТМ!-кода 
Сонтмь: Ғопсёіоп () { 








хаб оне =: "1 

ооё += '<ѕрап с1аѕѕ= "геѕЕееатіі1еРготрё">К55 Еееа ' 

оо += '(' + 6615. Еееа] паех + * оЁ ' + іһіѕ.помЕееаѕ + уе кт 
опЕ += '</ѕрап>'; 

оч += '<ѕрап с1аѕѕ= "геѕҒееатіё1е">'; 

ооё += '<а ҺкеЁ="' + ЕҺ1іѕ.рѕѕ1іет.гѕѕЕееа.1іпк + '">' + 
ЕҺіѕ.кѕѕ1бет. г=ѕҒееа.ёіб1е + '</а>'; 

ооё += '</ѕрап>'; 

ооё += '<рг/>'; 

оо += '<ѕрап с1аѕѕ= "гзѕҒееатёсемтіё1ергопріё ">Агёіс1е '; 
ооё += '(' + ЕҺіѕ.іёсеміпӣех + ' оЕЁ * + 


Е515.и$5$1Сем.кззЕееа.16емз.1епаЕВ + ') :'; 
ооё += '</зрап>'; 
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"" 


маг оџё = 
оцЕ += "<зрап с1аѕѕ="гззҒеейтії1еРготрі">Кѕѕ Рееа ' 
осЕ += '(' + Сіз. беедТлаех + ' оЁ ' + 1015.побРееаз + ') ; 1; 
= ' ГА '.. 
Я$5-лента (2 из 4): А АТ рва. тавы. 
Ейс'е мебо ОШЕ += '<5рап с1азз="гзѕҒеейтіт]е">'; Е 
аи оше += '<а АгеЁ="' + +һіз.гз5Ісет.гзѕРеед.1іпк + '">' 
+ тһіѕ.гэѕІбет.г=ѕРеей.ііїіе + '</а>!; 
ОЕ += '</5рап>'; 
ооё += '<Ъг/>'; 


Рис. 13.15. В55-лента (х из у): название В55-ленты 


оо += '<ѕрап с1аѕѕ = "гз$ Еее а {ет Т1{1е">'; 

ошї += '<а вгеё-"' + 1613. г5з1 (ет. 110 К + '">' + 
{813.155 [ет .11Е1е + '</а>'; 

оц += '</ѕрап>'; 

оог += '<аіу с1аѕѕ =" гѕ5 {ет Соп+епе" > ' 

ошї +- 101$. 15$ [(ещм. 4езсг1рЕ! от; 

оц += '</аіу>'; 





геїіигп оцЕ; 


Ь 





Метод ЮНТМІ. создает на экране контекстные элементы, за которыми сле- 
дует текст статьи. Первый фрагмент кода отображает текст К55-лента (х из 
у) : Заголовок К$5$-ленты. Атрибут пк родительского элемента гѕѕ Еееа ис- 
пользуется для генерации атрибута НВЕЕ анкера, а атрибут їії1е — для ге- 
нерации текста анкера. Для каждого элемента ѕрап генерируется имя класса 
С$5 (одно для запроса, второе для анкера), что позволяет независимо опре- 
делять стили этих элементов. Сказанное иллюстрируется на рис. 13.15. 

Следующий фрагмент кода генерирует текст Статья (х из у): Заголо- 
вок Ҝ88-статьи. Для генерации атрибута НКЕЕ анкера используется атрибут 
Нак К85-статьи, а с помощью атрибута 1111е статьи генерируется текст 
анкера. Кроме того, как показано на рис. 13.16, код предоставляет имена 
классов С88 для запроса и заголовка. Несколько последних строк метода 
ЮНТМІ. генерируют элемент Чу, который будет вмещать содержимое статьи 
В55Цет (атрибут аеѕсгірііоп). Соответствующий код выглядит следующим 
образом: 

оо += '<аіу с1а85="г58 ет Сопќепі">'; 

оо += 1һ1ѕ.гѕ51ет.аеѕсгірііоп; 

ош += '</аіу>'; 

Для текста статьи генерируется имя класса С55 гѕ51етСопіепі. Что- 
бы текст не подходил вплотную к границе блока, в соответствующем классе 
необходимо задать небольшие поля и заполнение. Кроме того, данный блок 
должен иметь фиксированную высоту и значение аџѓіо параметра оуетНом, 
чтобы его содержимое можно было при необходимости прокручивать незави- 
симо от показанной ранее контекстной информации. Типичное определение 
класса С55 для блока текста статьи приводится ниже. 
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сз += "<врат сђазз-"тэзеебітевтісіергошрі">Агбісіе '; 
сё += '(' + 4513. 1телТлаех + ' оѓ | 
Статья (1 из 3): + сіз. гэзІсеп.сз5Ғееа.ітетз,1епуёһ + ') : '; 


: егуег ооё += '</ѕрап>'; 
ХМ. без ошё += '<зрал с1азз="гэзҒеейїсещтіт1е">'; 
+ ©һіз,гззІсет.тітіе + '</а>'; 
саб += '</5рап>!'; 


Рис. 13.16. Статья (х изу) заголовок В55-статьи 





А Вазіс Ајах Соріепі Мапавегет\ Ггаллемиотк, 

Опе оЁ ће ргојесі аё! оз оок сопіго о? ігаскз боситепіх аќ ће Мгебтаѕќег (5 ріасіпр 
‘тапиайу по а ег алд раѕїеѕ а ѕврагаќе ШРІ. Кю а бзќабазе 50 К сап Бе іпкед (0 тийре 
гесогӣѕ, оћег аЫв$, апд офћег стар. ТПа рай 15 пох їтрогапї, ши} особі 1) мои ей усу 
феге і оц о? із. Аз | маз собіпр ће сћескіпа 10 зве а е ехіз5 | мас ке тап, Ајак 
соиб Бо е тіста Вок 0 позе мс сопеопе таповетел( (осіє сиё оге. Том һәур а 530 
Ъићйег ке оп Вгіпке {ег ог апу 01 пе олег ћоз! апб Ајах сал упргоуе Из еесмепеѕэ, 1 маз 
аһауѕ аппоуед Бу Һоме см еу мега {0 гвасі мћеп пауісайпр ѕіпсе 16 амеауѕ һай (0 60 е ВА 
рае геїтезћ (0 х2( е боситепіс апа ѕисћ. 1 уси ад {р во 10 Нез беер іл ће гео, | пеебәб 
аъеег апй а бав о? ргеїсвіѕ мая Рог И ко Парреп. 


$0 | ЈиЅ табе а диск чб. пе{ ргојесе ас #5 по Ѓапсу. 1+ іє а Базіс їгатемогк Гог ус 0 Бе абе 1 
{о пауісаќе гоида а дігес(огу оп ә мер зогуег эп соќ а! Ње Нез алд {010еге. Тһе собе 15 а 
азс баг ро!п\ бог апуопе а! жал {© сгеаќе а угау с а изег (о (оок г Нез оп е 
зегуег. | ѕее а 01 оѓ реор® ѕауїпе Фа! еу уғапі а Ре іприї (о Бе зЫв 10 звагсћ ће зегуег, 

МИ Фі соде, уоу сап стеабе М, 121 һәб тога те, 1 уои ства а оок Шке Не Бгомзег, БиС І 
ат биѕу уі ће Боскі |! апуоле ои {Него боох 1, таке зиге (о роѕі а ШК іп Фа соттепі, = 


Мом, уош гегђу леей 10 абдгеѕз ѕасигїу ћеге зіпсе уси аге айоміго реор(а їо ассезѕ Фе {ойег 
ененнен ле о овен 1 А ут ОИН) и ее ВАР Роль ение аа Ма Мичаел 16 


Рис. 13.17. Статья (х изу) заголовок ВЗ$-статьи 


„гззТеетСопеепе { 
рогӣег-ёор : 1рх зола БЛасКк; 
міаєһ : 590рх; 
Һеідһі : 350рх; 
оуегЕТом : аобо; 
раааіпд : 5рх; 
тагдіп-іор : 2рх; 

} 

При таком стилевом оформлении область содержимого должна выгля- 
деть примерно так, как показано на рис. 13.17. Собирая вместе все составляю- 
щие, получаем показанное на рис. 13.18 представление, генерируемое классом 
Вбоцет\Ме\у. Прежде чем завершить рассмотрение представления, добавим 
в него еще один маленький метод, который немного облегчит его использо- 
вание. 


іоЅігіпо: РапсНоп() { 


геїигп 115 4оНТМГО; 
Ј 
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А Вазіс Ајах Сопіт Мапаветері Ғгатемогк 
Опе с! Фе ргојесіу Та јиѕх (006 сопігої о? аске дооитапіѕ а! ће УеЬтазбег 5 рігсіпр, 
тапиайу ито а оЩег ап разв а зерагале УР по а ба(афаѕе 50 і: сап бе бпкей о падре 
гесогбз, олег ‹аБвх, ап офег сгар. Тат раг іє поё Итрогеапу, Бой Фомере г моца 190 уош, 
мћеге 1 оцоћх ох. Аз | маз сойо ће сһескіпд іо ѕее 1? а (йе ехізћ | маз Шка іа 
соми Ба ће тізіп (пк (о оѕе меб сопіепі тападегтепі 1005 оо еге. үсџ Вауе а $1 
Бинаог ке оп Вгілкѕќег ог апу оѓ ће о(ћег ћоѕ{ апё Ајах сап ітргоме 115 гесбуепезѕ, 1 мар 
амауз аппоуеб Ву һом зісм еу үгеге {0 гвасі пел пахіда Час 5іпсе 1 амеауѕ Вад ко ба {ће МА. 
раде геігеѕћ (о бе! (ће йослтолз апо зисћ, 1 уси ћай 00 ро 10 йез еер іп ћа гав, | пеедеб 
Вѕ9ќет\№ем Везий 2 Беег апд а бас о? ргебггіз ғап (ог И 10 ћәрреп, 


501 155 табе а доіск 5. пех ргојес Фаг {$ пох Фапсу, 10 15 а базіс їгатежогк огуоч по бә аб 
10 пауідахе (ћгоцећ а бігескогу оп а мер зегуег ало Ю0К ат ће ез әла їо\дегу. Тһе сода 9а 
раѕіс (аи па роїм (оғ апуопе а ччаліз © сгеабе а уму (ог а исег (о (оок Гог 05 оп фе 
зегуег. | зев а (ої о! реоріе зауюз Ват (Һеу апі а НЮ прил {о Бе зе к звагсћ (ће зегуег, 
МИ 5 собе, уои сап стезя 14, 171 ад тоге те, 1 меа стеаќе а оок ке йе Ыгомезег, БиС. 
ат Бизу чи В (ће Бой 17 апуспе ош еге 402$ 1%, таке ите іо. роз а пк іп е сотила, 


Мом, уош гезву пеод о аййгесс зосшНу ћеге єіпсе уси асе айоо реоріа бо ассесх е (ае 





Рис. 13.18. Окончательный вид класса В551їет\іем 


Причина, по которой мы дали представлению метод {0ѕїгіпё, заклю- 
чается в том, что это позволяет нам взаимозаменяемо использовать экзем- 
пляр представления и генерируемую им строку НТМГ. Например, мы можем 
присвоить значение атрибуту шпегНТМТ, элемента, равное классу представ- 
ления, и далее будет использоваться строковое представление (сгенерирован- 
ный НТМГ-файл). Например, ниже приводится код, присваивающий сгенери- 
рованный НТМГ-документ представления атрибуту іппегНТМІ. элемента іу 
с идентификатором сощеп у. 

уаг 153Цет\Ме\м - пем ВЗ5ИетМе\( апҜЅ8Еееа, 0, 0, 5 ); 

$('сопіепіріу'). іппегНТМІ, = тг5зЦет\Ме\; 

(Помните, $() — это функция из библиотеки Ргоѓоѓуре, позволяющая из- 
влекать элементы РОМ по их идентификаторам.) Теперь, когда у нас есть 
хороший набор абстракций для классов модели и представления, рассмотрим 
контроллер приложения, который свяжет воедино все эти компоненты. 


13.7.3. Контроллер приложения 


Класс К$5Кеаег будет объединять функции, связанные с манипуляцией 
классами модели и представления, координируя все действия, соотнесенные 
с приложением чтения К55-лент. Напомним, что интерфейс приложения ре- 
ализован в виде слайд-шоу лент, когда каждая статья будет отображаться на 
определенный период времени, а затем постепенно переходить в следующую 
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статью. Приложение имеет кнопки, позволяющие переходить на следующую 
и предыдущую статьи, а также кнопки паузы/возобновления слайд-шоу. На- 
конец, имеются раскрывающийся список и кнопка добавления новых лент 
к исходному набору. Ниже перечислены пять необходимых категорий пове- 
дения, которые должны быть реализованы в приложении. 


1. Построение объектов и первоначальная настройка. 
2. Реализация слайд-шоу. 

3. Создание эффектов перехода. 

4. Загрузка В58-лент средствами Ајах. 

5. Обновление пользовательского интерфейса. 


Чтобы уменьшить сложность и объем кода, требуемого для выполне- 
ния всех этих задач, используем библиотеку Ргобо{уре (позволяющую по- 
лучить синтаксическую лаконичность), библиотеку Кісо (обеспечивающую 
функциональные возможности, требуемые для эффектов перехода) и объект 
пеї.Сопіепі оа4ег (предлагающий поддержку Ајах). Итак, начнем с перво- 
начального построения и настройки. 


Построение и настройка 


Фактически разработка всех наших предыдущих компонентов начиналась 
с конструкторов. Будем верны традиции и сейчас — начнем с определения 
конструктора, которым в данном случае является простой метод, задающий 
первоначальные значения по умолчанию для какого-то состояния компонен- 
та и, как в других примерах, устанавливающего конфигурационные опции и 
выполняющего инициализацию. Учитывая это, конструктор КЗЗКеадег опре- 
деляется так, как показано в листинге 13.27. 


Листинг 13.27* Конструктор КЗЗКеааег ; ^Х^В 


К5Кеайег = С1аѕ.сгеаѓе*); 
В $5 Веадег.ргообуре = { 
11 1аПте: Ёопсбоп( геадейа, орійопѕ ) { 

// О Установить значения по умолчанию 
{615.14 = геааег!а; 
1һіѕ.ігапѕіїіопТітег = пи/1; 
{01$.раизе4 = ҒЁа1ѕе; 
{61$.У1$161еГауег = 0; 

// © Настроить опции конфигурации 
1іѕ.ѕеїОрёіопѕ(орііопѕ); 

// © Инициализировать поведение 
{61$.51агё{); 


), 


Приведенный выше конструктор принимает два аргумента: идентифи- 
катор и объект опций. Идентификатор используется как уникальная метка 
приложения и добавляется как префикс к идентификаторам кнопок, кото- 
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рые он должен будет определить в структуре РОМ. Реализация сказанного 
будет показана ниже, в методе арріуВиіѓопВеһауіогѕ. Первое, что делает 
конструктор О, — это устанавливает значения по умолчанию для состояния. 
Далее (как и в большинстве других проектов) используется объект опций ©, 
с помощью которого задаются конфигурационные опции компонента. Для 
этого применяется метод ѕеіорііопѕ. Наконец, в методе ѕіагі © происходит 
все, что требуется для активизации компонента. Далее мы сначала рассмот- 
рим конфигурацию, а затем перейдем к поведению. 

За конфигурацию отвечает идиома ѕеїорііопѕ, показанная в листин- 
ге 13.28. Давайте разберемся с реализацией ѕеѓорііопѕ и обсудим опции кон- 
фигурации. 


Листинг 13.28. Метод ѕеїоріопѕ ]]]| 
ѕеїОрііопѕ: ҒЁипсііоп(орііопѕ) { 
1һіѕ.орїіопѕ = { 
ѕіаеТгапѕіїіоп ОеІау: 7000, 
ҒааеОогайоп : 300, 
еггогГНТМІ. : '<һг/> Еггог геїгіеуіпв сопќёепі. <Ъг/>' 
}.ехіепа(орііопѕ); 


Ь 





ш 


В приведенном методе ѕе{іОрііопѕ указаны свойства приложения, кото- 
рые мы решили сделать настраиваемыми. Свойство $1іаеТгапѕіїіоп Ое1ау 
задает число миллисекунд, в течение которых один "слайд" статьи виден до 
перехода во второй. Свойство ҒайеЮигаіоп задает время в миллисекундах, 
требуемое для полного затухания "слайда" (а следовательно, для "проявле- 
ния" следующего "слайда"). Наконец, при возникновении ошибки в процес- 
се загрузки К$55-ленты используется свойство етоГНТМТ, задающее НТМГ- 
документ, отображаемый в качестве сообщения об ошибке. В приведенном 
коде также показаны значения данных свойств по умолчанию, которые сохра- 
няются, если пользователь явно не укажет другие. Здесь стоит отметить, что 
компонент ожидает, что ему в качестве исходного набора лент для обработки 
будет передано свойство гз5Еее$ объекта опций. Поскольку мы в действи- 
тельности не можем предложить разумное значение по умолчанию для этой 
величины, в методе ѕеіорііопѕ она не определяется. Подразумевается, что 
приложение будет создано с объектом опций, подобным показанному ниже. 

уаг орйоп$ = 

г55Нееаз: [ "һр: //тааіо.јауагапсһ.сот/пемѕ/155. хт", 
"Һер: //гааіо.ј ауагапсһ.сот/раѕсагеПо/тѕ5.хті", 
"һер: //тааіо .јауагапсһ.сот/Ббеаг/тѕ5.хті1", 
"єр: //тайіо .јауагапсһ.сот /аѕѕе/гѕ5.хті" ] 1; 

уаг гѕ5Кеайег = пем К55 Кеааег{'тѕѕКеайег, орііопѕ ); 

Итак, мы довольно быстро закодировали создание и настройку конфи- 
гурации. Теперь можно переходить к магическому методу ѕіагі, который 
и запустит весь процесс. В следующих разделах мы кратко рассмотрим этот 
метод и посмотрим, к чему приводит его использование. Начнем, как обычно, 
с реализации, показанной в листинге 13.29. 
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Лои 1329. Мед за": ЯНННИНИННННННННН| 


зіагі: Ёцпсёіоп() { 
Еһіз.арр1уВвиёёопВеһауіог (); 
пет ЕЁҒесі.ҒайетТо( ёһіѕ.деёауег (1), 0.0, 1, 1, {} ); 
ЕҺ15ѕ.1оаавЅ5Ғееа (0, гие); 
ЕҺіѕ.ѕбагі511ідебһои{ Ға1ѕе) ; 


|А щ 








Метод арріуВиіѓопВеһауіогѕ настраивает обработчики событий опсіісКк 
для кнопок перехода к предыдущей /последующей статье, паузы/возобновле- 
ния, а также кнопки добавления новой ленты. Этот метод мы рассмотрим 
следующим. Эффект затенения, представленный во второй строке, вызывает 
постепенное исчезновение с экрана видимого элемента іу, чтобы его мож- 
но было скрыть при загрузке первого слайда. Обратите внимание на то, что 
в данной реализации мы не кодируем эффект самостоятельно, а использу- 
ем готовое решение из библиотеки Кісо, что уменьшает объем кода, который 
требуется писать, отлаживать и сопровождать. Метод ІоааКк55Еееа инициа- 
лизирует запрос Ајах на загрузку в первую ленту, а метод ѕіагіЅ1іаеѕһоу 
запускает таймер со значением $ійеТгапѕіїіоп ОеІау, инициируя таким об- 
разом слайд-шоу. Подробнее метод Іоаак $5 Ғееа будет рассмотрен в разделе 
"Загрузка В55-лент с помощью Ајах", а метод ѕїагіЅ1ійае$һом — в разделе 
'Реализация слайд-шоу". На этом мы, как и обещали, завершаем обсужле- 
ние построения и настройки, рассмотрев упомянутый в листинге 13.29 метод 
аррІуВиќолп Веһауіотгѕ. 

Как отмечалось ранее, метод арріІуВийопВеһауіогѕ подключает кнопки 
к методам, реализующим их поведение. Реализация этого метода показана 
в листинге 13.30. 


Листинг 13.30. Метод арріуВиіѓол Веһауіогѕ . 
аррІуВиќопВеһауіогѕ: Ёипсііоп!) { 





$ (1115.14 + ' ргеуВќп) .опсііск = һіѕ.ргеуіоиѕ.Біпа(ёһіѕ) ; 
$(һіѕ.іа + ' пехёВёп').опсІіск • 1101$. пехі.Біпа(ёһіѕ); 
$(һіѕ.іа + ' раџѕеВіп').опсііск - #һіѕ.раицѕе.Біпа(ёһіѕ); 


$({һіѕ.іа + ' ааавіп')-опс1іск = #һіѕ.аааҒееа.Біпа(еһіѕ); 


+ 





Здесь, пожалуй, стоит напомнить, какой синтаксис и какие идиомы мы 
используем. В частности, мы задействовали пару синтаксических элементов 
библиотеки Ргоѓоїуре. Во-первых, это метод $, который можно рассматривать 
как вызов ЯӢоситепі .веїЕІетепіВуІа. Во-вторых, метод Біпа неявно создает 
для нас замыкание, так что обработчик событий опсПсК для каждой кноп- 
ки может вызывать методы первого класса нашего компонента. Рассмотрим 
теперь детали реализации. 

Реализация открывает неявный контракт между компонентом и НТМГ- 
разметкой приложения. Компонент создается с идентификатором, который 
хранится в атрибуте 1115.14. Позже этот идентификатор используется как 
префикс для нахождения различных элементов в разметке. В данном слу- 
чае предполагается, что идентификаторы кнопок -— это метки, переданные в 
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Таблица 13.4. Атрибуты контроллера 


Атрибут Описание 
{01$ . сиггеп1Рееа Экземпляр ВЅ5Еееа, в текущий момент загруженный в память 


{ 01$. тееатаех Номер ленты, показываемой в текущий момент. Является 
индексом массива 111$ . орііопѕ .г55Ғеедѕ 


101$. Цетштаех Номер статьи, показываемой в текущий момент Является 
индексом массива статей объекта В5$Ғееа, показываемого 
в текущий момент 


конструктор, к которым добавлено _ргеуВіп, _пех{В1а, _раизеВ и ааавВіп. 
Чтобы проиллюстрировать сказанное, рассмотрим приведенный выше код. 
В качестве идентификатора здесь используется гѕѕКеайег, а компонент ожи- 
дает, что кнопки будут заданы следующим образом: 


" 


<іпри фуре="Ба Йоп" ій="г55Кеааег ргеуВіп" уаше=" « > 

<шриё їуре="биіѓоп" ій="тѕ5Кеайег раџѕеВіп" уаше=" ГГ" /> 

<шриё їуре="Боиіоп" іа="гѕ5Кеайег пехіВіп" уаше=" » " /> 

<іприі ќуре="боиќоп" іа="гѕ55Кеайег аааВіп" уаше="Ааа Еееа" /> 

Видно, что контроллер КЅ85Кеайег начинает приобретать форму, и теперь 
мы можем рассмотреть детали реализации слайд-шоу. 


Реализация слайд-шоу 


Теперь самое время поговорить об изменении семантики по сравнению 
с предыдущей версией сценария. Изначально мы загружали все К55-ленты 
в память в момент запуска, а затем просто формировали переходы между 
внутренними представлениями лент. Это было просто, но масштабируемость 
такого решения вызывала определенные сомнения. Если мы регулярно про- 
читываем десятки или сотни К$5-лент, содержащих десятки статей, предва- 
рительная загрузка их всех была бы чересчур сильной нагрузкой на браузер. 
Поэтому в разделе реструктуризации мы попытаемся добиться нормальной 
масштабируемости и производительности приложения, так изменив семанти- 
ку, чтобы за раз в память загружалась единственная К58-лента. Все статьи 
В55Иетз одной ленты побывают в памяти, однако в каждый отдельный мо- 
мент времени в памяти будет присутствовать только один элемент КЅЅЕееа. 
За то, на каком этапе находится слайд-шоу в процессе отображения содер- 
жимого, отвечают три атрибута контроллера, описанных в табл. 13.4. 

Разобравшись с семантикой, переходим к навигации. Если мы планируем 
реализовать навигацию по всем статьям (элементам Цет) всех В55-лент, то 
должны изучить несколько методов. Рассмотрим для начала пару методов 
перехода к предыдущей/следующей статье. Механизм перехода требуется не 
только для реализации явных событий, связанных с кнопками, но и для пас- 
сивного чтения при просмотре автоматизированного слайд-шоу. 

Итак, рассмотрим пару булевых методов, сообщающих читателю, может 
ли он переходить вперед или назад. Реализация этих двух методов һаѕрРге- 
уіоиѕ и һаѕ№Мехі показана в листинге 13.31. 
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... ЛИСПИЙГ 13.31. Пара методов Ваз Ргеуіоиѕ/һаѕ Мех а 
ҺаѕРгеуіоиѕ: РапсНоп() { 
геиги ! (#15.ѓееаіпаех == 0 && 101$ .Цешшдех == 0); 





}, 
ҺаѕМехё: Ёопсёіоп() { 
хебоаки ! (Еһіѕ.Ёееа1паех == Еһіѕ.орііопѕ.геѕЕеейаѕ.1еподіһ - 1 && 
ЕҺіѕ.ібет1іпаех == ЕҺіѕ.сиггепЕҒееа.іёетѕ.1еподіһ - 1); 
а Щщ 





С помощью представленных методов определяется, доступен ли преды- 
дущий или последующий слайд. При указанной реализации предыдущий 
"слайд" будет доступен в том случае, если в текущий момент приложение 
демонстрирует не первую статью первой ленты, а следующие "слайд" досту- 
пен, если мы читаем не последнюю статью последней ленты. 

Рассмотрим теперь, что такое переход на предыдущую и последующую 
статью ленты. Начнем с метода ргеуіоиѕ (), показанного в листинге 13.32. 


Г Листинг 13.32. Метод ргеуіоиѕ ()'^1Д|Д 


ргеуіоиѕ: Рапсйоп() { 

Ш ( 1һіѕ.ҺаѕРгеуіоиѕ() ) геїигп; 
уаг гедиігеѕГоаа = 1+һ1ѕ.іќетіпаех == 0; 
һіѕ.ЃааеОоі( +һ1ѕ.уіѕіЫе1ауег, Ргоѓоїуре.етрќіуЕипсіоп ); 
1һіѕ.уіѕіЫе[:ауег = {1һіѕ.уіѕ1Ые1[ауег + 1) % 2; 
Ш { теацігеѕ оаа 

1һіѕ Іоааҝ55 Еееағ (һіѕ.Ғееаїпаех - 1, Ёа1е ); 
е1ѕе 

ѕеєіитпеооє( 1һ15.ргеуіоиѕРагіТуо.Біпа(іһіѕ), 

рагѕе!пї (161$. орііопѕ. ааеЮигайоп/4) ). ; 


Ь 
ргеуіоиџѕРагкіТио: Ёцпсііоп() { 
ЕҺ1іѕ.іёем1пдех'—–; ёһіѕ.ирдӢаёеуіе () ; 


рэ) 








Первое, что мы сделали при написании метода ргеуіоиѕ (), — поместили 
в самом его начале защитное условие. Если предыдущей статьи не существу- 
ет, метод ргеуіоиѕ () ничего не делает. Если значение геаштезГоа4 равно 
{гие, тогда содержимое К58-статьи, на которую планируется переход, еще 
не загружено. Если мы находимся на первой статье ленты и переходим на- 
зад, требуется загрузка предыдущей ленты. Метод затухания, подробно рас- 
смотренный в разделе "Эффекты перехода", постепенно ослабляет видимый 
слой. Дальнейшие действия этого метода зависят от того, требуется ли перед 
отображением загрузка какого-либо содержимого. Если да, то мы иницииру- 
ем загрузку необходимых данных посредством метода 1оа9К$5Еееа(). Пер- 
вым параметром данного метода является номер загружаемой ленты, вто- 
рым — булево значение, указывающее направление: {гие — вперед, Ёа1ѕе 
(как в данном случае) — назад. Если же содержимое статьи уже загружено, 
то мы вызываем ргеу1оч$РагТ\уо() после паузы, равной одной четвертой 
общей длительности ЃайеЮигаііоп. Во "второй части" данного метода про- 
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сто обновляется свойство Це ш4ех и вызывается функция праже\ем (), 
приводящая к затуханию соответствующего слайда. 

Ну что, запутались? Ладно, объясняем нормальным языком: если текст, 
который нужно отобразить, не загружен, его загрузка начинается немедлен- 
но, что приводит к обновлению пользовательского интерфейса сразу же после 
поступления данных. Время, которое требуется на прием данных, использу- 
ется для естественной реализации затухания! С другой стороны, если содер- 
жимое уже загружено {т.е. мы переходим на другую статью загруженной 
ленты), то мы вводим искусственную задержку (четверть времени затуха- 
ния) перед проявлением следующей статьи. Довольно хитро, правда? 


Метод пех (), показанный в листинге 13.33, представляет собой реализа- 
цию алгоритма, обратного к приведенному выше. 


пех: РапсИоп{} 

Ш ( 1һ15.һаѕ №ехі() ) теги; 

уаг гедиігеѕГоаа = 

1һіѕ.1їетіпаех == (1һ1ѕ.соиггепіЕееа.іёетѕ.Іепеїһ - 1); 
{015.Га4еОчЕ( 111$.%1511еГауег, Ргоѓоѓуре.етріуЕопсйоп ); 
{01$.у15101еГауег = ((һіѕ.уіѕіЫе[ауег + 1) % 2; 

Ш ( гедашезГоаа > 

ЭНЕ һіѕ.Ғееаіпаех + 1, гие ); 

е1ѕе 

ѕеєТитпеоші( 1һіѕ.пехіРагіТуо.Біпа(іһіѕ), 

рагѕе1п(һ1ѕ.орііопѕ.ҒааеЮигаііоп/4) ); 


Ь 
пехіРагёТио: Ёџпсіёіоп() { 
ЕҺ1ѕ.ібеп1пдех++; ЕҺ1ѕ.ирӣӢабеуіеи() ; 








Выглядит знакомо? Метод пех{() использует противоположную логику 
индексирования, а во всем остальном идентичен приведенному выше алго- 
ритму. Обратите внимание на то, что при каждом переходе пара методов 
ргеуіоиѕ () /пех({) переключает видимый слой с одного слайда на другой 
с помощью такого выражения: 


1һ15.уіѕіБЬе1ауег = (1һіѕ.уіѕіЫе[ауег + 1) % 2; 


Таким образом, мы сообщаем коду, который в конечном счете обновит 
пользовательский интерфейс (после загрузки содержимого или явного вы- 
зова функции ирӣаѓеУіеж ()), на какой слой помещать результат. Напомним, 
что контекстная область приложения содержит НТМГ-разметку, которые вы- 
глядит примерно следующим образом: 

<!— Контекстная область — > 

<аіу сІаѕѕ="сопіепі" ій="гѕ$Кеайег сопѓепі"> 

<аіу с1аѕѕ="Іауегі"> Гауег 0</іу> 
<аіу с1аѕ5="Іауег2"> Гауег К/аіу> 

</аіу> 
Здесь у1$161еГауег — целочисленное свойство, отслеживающее, в какой эле- 
мент іу требуется помещать содержимое. Индекс 0 указывает, что при об- 
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новлении пользовательского интерфейса содержимое должно помещаться на 
слой 0. Значение | приводит к вставке данных на слой 1. 

Подведем итог. У нас есть методы, с помощью которых реализуется пе- 
реход вперед/назад по набору статей, и мы можем их использовать для со- 
здания методов слайд-шоу. Рассмотрим их В листинге 13.34 показаны метод 
ѕіагі5паӢеЅһоу, который, как вы помните, вызывался из метода ѕѓагі(), 
и дополняющий его метод пехїі$ іе (). 


ЛистинМЗ.34. Методы навигации по слайд-шоу 
зіагі51ідаеѕһок: Ёопсёіоп (хезише) { 


уаг ае1ау = гезоше ? 1 : ЕҺіѕ.орііопѕ.51ійетгапѕіёіопре1ау; 
Ећ1іѕ.ігапѕіііоптТітег = ѕзебтТітмеоиі { ЕҺіѕ.пехі51іде.ріпа(ёһіѕ), 
ае1ау) ; 


К 


пех Пае: РЮпсйопй { 
1 ( 1һ15.һаѕ№ехіО ) 
(615. пехЕ(); 


е15е 
іѕ.Јоаак $5 Еееа(0, іре) р 
һ15.ігапѕійопТітег = зеё Пац А . 
(015$. пех Пае. 11а (115), 
115.оріїопѕ.ѕіаеТгапѕійопрејау ) ; 


). 


Приведенный метод ѕіагі$5ійеЅ$һоҗҹ вызывает пехі51ійе после заданной 
задержки. В зависимости от того, возобновляем ли мы слайд-шоу после па- 
узы или нет, задержка равна либо ѕійеТгапѕіїіоп Ое1ау, либо одной мил- 
лисекунде (практически мгновенно). Таким же простым является и метод 
пехіЅ пае, вызывающий метод пехі() при наличии следующего слайда. Ес- 
ли текущий слайд является последним в данной ленте, вызывается Іоаак$8- 
Еееаӣ(0 гие) и мы переходим на начало ленты. После этого просто устанав- 
ливается таймер и процесс повторяется. Все очень легко! 

Мы уже говорили, что слайд-шоу можно приостановить с помощью кноп- 
ки паузы, однако соответствующий метод еще не был реализован. Восполним 
этот пробел и создадим метод, показанный в листинге 13.35. 


гіухікіпіі О. ОЈ. іу (С ІчЛЦиа Оос 





"ө явчвИнЯяиИИН^ВДИв^вРИ“" *і "ө ө ооо ө ө //7 ^и ШЯШЩшиШШШШЯШЯШЩШЯ^Ш^ШВЯШШЯШЩШШШШШШшиШШШШШШШШШШШШШШШШШШІ 
рацчѕе: Ёцпсёіоп() { 
1Е ( ЕҺ1іѕ.рацџѕеа ) 
ЕҺ15ѕ.ѕбагі511ідебһои (Егие) ; 


е1зе 
с1еагтітмеоиі ( ёћіѕ.ёгапѕіёіоптТітмег ); 
с51$.раизеа = !Еһіѕ.рацџѕеа; 


- + Е 





Метод раизе переключает состояние паузы нашего слайд-шоу. Текущее 
состояние отслеживается с помощью булева атрибута 1һіѕ.раџѕеа. Если 
слайд-шоу уже приостановлено, метод раџѕе вызывает функцию зѕіагї- 
ЅһаеЅһож, в качестве значения свойства геѕшпе передавая значение {гие; 
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в противном случае метод обнуляет атрибут ігапѕіііопТітег, подавляющий 
все переходы между слайдами до тех пор, пока кнопка паузы не будет нажата 
повторно. 

Чтобы завершить реализацию слайд-шоу, нужно реализовать функцию, 
которая бы позволила добавлять в этот процесс новые К55-ленты. Изучая 
код функции арріуВиѓіопВећһауіогѕ(), мы видели, что кнопка добавления 
новой ленты вызывает метод аааЕее4. Давайте реализуем этот метод (см. ли- 
стинг 13.36) и будем считать, что мы сделали все для получения управляемого 
слайд-шоу. 


Листинг 13.36. Метод аааЕееа 
аааҒееа: Ғопсііоп() { 
уаг ѕеІесіВох = $(1һіѕ.іа + ' пем Ееейѕ’); 
уаг ЁеатТоАда = ѕе1ІесіВох.орііопѕ[| 
ѕеІесїВох.ѕеІесїеаіпаех ]|.уаше; 
1һіѕ.орііопѕ.гѕѕ Ғееаѕ.риѕһћ (ҒееаТодаа); 


Ь 





Приведенный выше метод также зависит от неявного контракта с НТМІ- 
разметкой с позиции договоренности об именовании списка дополнитель- 
ных Ҝ885-лент. Идентификатор данного списка должен быть идентифика- 
тором приложения с суффиксом _пемѕЕеейѕ. Метод аааЕееа просто при- 
нимает выбранную К55-ленту в списке и добавляет ее в конец массива 
161$. орііопѕ. г55Еееа$. Больше ничего не требуется! Ну как вам это нравит- 
ся — добавление новых функциональных возможностей требует всего пары 
строк кода! 

На этом мы завершаем разработку методов, связанных со слайд-шоу. Те- 
перь рассмотрим кратко методы, поддерживающие эффекты перехода. 


Эффекты перехода 


В нашем коде упоминалось несколько методов, поддерживающих затухаю- 
щие переходы между слайдами. Давайте рассмотрим эти переходы подроб- 
нее. Итак, прежде всего мы определим пару методов Га4еп() и ғайеОшо, 
как показано в листинге 13 37. 


Листинг 13.37. Пара методов Ғайеіп< )/ҒааеОш() */ ‚ =НИИ 


Гаде: Ғопсііоп( Іауег, опСотріеїе ) { 
һіѕ.ҒааеТо( 0.9999, Іауег, опСошрые ); 


ҒааеОш: Ғопсіоп( Іауег, опСотріеїе ) { 
1һіѕ.ҒааеТо( 0.0001, Іауег, опСотріІеїіе ); 


Ь 


о м 


Оба указанных метода делегируют свои полномочия методу а4еТоО 
(он разобран ниже). Они передают методу а4еТоО параметр прозрачно- 
сти — значение между 0 и 1, где 0 соответствует полностью невидимому 
слою, а | — полностью видимому. В некоторых браузерах значение, очень 
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Таблица 13.5. Параметры Еї##есі. ҒааеТо 


Параметр Описание 

{01$ . де{Шауег(!ауег) Затухающий элемент ВОМ 

А Степень прозрачности (значение между 0 и 1) 
{61$ . орііопѕ. Ғадеригаііоп Время затухания 

12 Число промежуточных этапов 

{сотріеїе: опСотріеїе} Обратный вызов, запускаемый после завершения 


близкое к 1 (но не точно 1), похоже, немного уменьшает мерцание изобра- 
жения, поэтому вместо 1 мы будем использовать величину 0,9999. Чтобы 
указать, какой слой должен затухать, мы передаем функции номер слоя (0 
или 1). Наконец, последний аргумент — это функция, обеспечивающая пере- 
хват обратного вызова сразу после завершения перехода. Реализация метода 
Га4еТо() показана в листинге 13.38. 


ҒааеТо: Ёопсііоп( п, 1ауег, опСотріеѓіе ) { 
пем Еҝесі.ЕааеТо( #һіѕ.реіауег(Іауег), 
п, 
сҺіѕ.орііопѕ. Ғадеригаііоп, 
122: 
{сошр[ ее: опСотріеѓеЈ ); 


Ь 





Из-за внезапного приступа лени или в качестве продуманного методоло- 
гического приема мы решили не изобретать заново эффект перехода. Вместо 
этого мы используем метод ЕЁ есі. ЕадеТо из библиотеки ВКісо, который и вы- 
полнит всю работу. Параметры ЕЌесі.ҒааеТо приведены в табл. 3.5. 

Чтобы получить элемент іу, соответствующий затухающему слою содер- 
жимого, мы использовали вспомогательный метод веі .ауегО, показанный 
в листинге 13.39. 


Листинг 13.39. Метод ае ауегО_ | Ц^Н^^^^Д|Н^^ ^^^ ААИ в 
вей ауег: Ёопсійоп(п) 

уаг сошеп(Агеа - $((115.19+' сощепг’); 

уаг сВПагеп = и сапа М“Хоаеѕ; уаг ј = 0; 


ог (а 1= 0; 1 < соИагеп еп ; Н+ } { 
Ё а арМате && 
сҺагеп[1|.аеМате.(оГоуегСаѕе() == '@іу' ) { 


- геќигп сһ!Шагеп[і]; 


} 
} 


геаги пи; 
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Данный метод находит область содержимого, предполагая, что ее иден- 
тификатор построен как идентификатор приложения с дописанным в конец 
значением _сопіепі. Найдя элемент содержимого, метод прослеживает его 
потомков и находит п-й дочерний элемент іу. 

Все, закончили и с переходами. Теперь рассмотрим тему загрузки К55- 
лент посредством магии Адах. 


Загрузка ВЅ55-лент с помощью Ајах 


Мы уделили довольно много внимания темам создания компонента и обеспе- 
чения богатой семантики слайд-шоу, а также необычных технологий ОНТМІ. 
для переходов между слайдами. Однако если все это не создано на основе ин- 
фраструктуры Ајах, гордиться совершенно нечем. Все дело в том, что иде- 
альный пользовательский интерфейс может обеспечить только Адах со своей 
масштабируемостью и индивидуальным извлечением данных илюс сложный 
ОНТМЕ со своими богатыми возможностями и эффектами. Говорить об этом 
можно долго, так что лучше все лее рассмотрим требуемую инфраструктуру 
Ајах, начав с метода, приведенного в листинге 13.40 и выполняющего загруз- 
ку В55-ленты в память. 


1юоааВ $5 Еее: Рапсиоп{РЕееаАшаех, Ююг\мага) { 
һхѕ.Ғееаіпаех = Ееашдех; 
һіѕ.іѓегаіпаех = гуага ? 0 : "1аѕі"; 
пеу пеї. Сопїіепё оааег(һіѕ, 
ћіѕ.орііопѕ.гѕѕ Ғееаѕ[Ғееаіпаех], 
"СЕТ", [] ).ѕепаКедиеѕі(); 


) 3: я 





Данный метод с помощью давно знакомого объекта пеѓ. СопіепіоаЯег 
формирует запрос Ајах, передавая в качестве параметра ОК. К55-ленты, 
заданный в массиве #һіѕ.орііопѕ.гѕѕ Ғееаѕ. Параметр Ѓогжага представля- 
ет собой булеву величину, указывающую, что мы загружаем (или не загру- 
жаем) новое содержимое вследствие перехода на следующую статью. Далее, 
согласно этой информации, обновляется свойство ііетіпаех. Обратите вни- 
мание на то, что, если мы переходим назад, ііетіпаех получает значение, 
равное 1а5ї, а не целочисленной величине. Такое решение объясняется тем, 
что свойство іїетіпӣех должно указывать индекс последней статьи преды- 
дущей К55-ленты. Единственная проблема заключается в том, что мы не 
знаем, сколько статей в ленте, поскольку она еще не загружена. 

Напомним, что согласно неявному контракту с пеї. СопѓіепіГоайег нам 
требуются методы ајахОрааѓе и Нап еЕггог. Разберем вначале метод ај ах- 
Орааѓе, показанный в листинге 13.41, и посмотрим, как с помощью данной 
реализации разрешить нашу дилемму индексирования. 
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Лизинг 1341. Мекд * Ја ^^^АЛШПШЯИШШШПППІП 


ај ахОрӣаёе: Ёоџпсііоп (кесиеѕё) { 
1Е ( міпаои.пеіѕсаре $ 
у1паом.ресзсаре . ѕесигііу.Ргіуі1есемМападег.епар1ерРгіуі1еде) 
песзсаре. ѕесиогііёу.Ргіуі1едемМапасдег.епар1ергіуі1еде ( 
'Ор1уегза1ВхомзетВеаа') ; 
еһҺіѕ.соггепёҒееа = 























К5Ғееа.рагѕехмі (геааезе . геѕропѕехмі. аосомепеЕ1етете); 
1Е ( ЕҺіѕ-іёем1пдех == "1аѕё" ) 
ЄҺіѕ.іёетіпаех = ёһіѕ.соггепіЕееа.іёеюѕ.1епоёһ - 1; 
с51$.праасеуУтеи(); 
[В ш 


Метод а]ахОрдайе начинает с проверки того, что он работает в среде, 
предлагающей РгіуПеѕеМапарвег. Если да, тогда он затребует привилегию 
Отіуегѕа1ВгомѕегКеаа. Как отмечалось выше, это сделано для того, чтобы 
наше приложение могло запускаться локально в браузерах Мо7Ша. 

В приведенном коде {1№15$.сиггеп{Еее — это экземпляр объекта мо- 
дели КЅ5Еееа, определенный в разделе "Модель". Он соответствует одной 
ленте К5ЗЕее, загруженной в память после отклика Ајах. Если значе- 
ние 1һіѕ.ііетіпаех равно 1а5{ (такое значение устанавливается методом 
юааК$5Еее4 при возврате к предыдущей статье), свойство іѓетіпаех обнов- 
ляется в соответствии с реальным числом статей в новой загруженной ленте 
К55Ғееа. Наконец, в ответ на вызов ирдж{е\Уе\() обновляется пользователь- 
ский интерфейс. 

Не забывайте, что нам еще нужно определить метод вап еЕтгог (не 
только потому, что это подразумевает контракт с пеї.Сопіепіоайег, но 
и потому, что нам действительно нужно какое-то средство обработки оши- 
бок). Если ленту К$5 загрузить не удается, мы предоставляем сообщение, 
показанное в реализации папе Еггог. Разумеется, возможны (и желатель- 
ны) более сложные реализации. 


Бап@еЕггог: Ёопсііоп(гедиеѕі) { 
15.ве.ауег(іһіѕ.уіѕ1Ые[ауег).іппегНТМІ = 
15.оріїопѕ.еггогНТМІ; 
Ь 
Итак, мы реализовали все необходимые возможности Ајах в приложении 
КЅ5Кеааег, остался последний штрих — написать пару методов, обновляющих 
пользовательских интерфейс. 


Обработка пользовательского интерфейса 


Напомним, что классы модели и представления мы создавали так, чтобы 
облегчить себе реструктуризацию кода приложения. Теперь, переходя к кон- 
троллеру, отвечающему за обновление пользовательского интерфейса, мы мо- 
жем считать, что сделана почти все работа. Это действительно так. Рассмот- 
рим, например, метод ирӣаѓеУіеу () (листинг 13.42), на который мы неодно- 
кратно ссылались в ходе предыдущей работы. 
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ЛИСТИНГ 13.42. Метод ордакеу\У1емЕ) 
џрааёеуіеу: Ёцпсёіоп() { 
уаг үѕѕІіепуіеут • пем Вб51Ііепуіеу ( 

ЕЋ1іѕ.соггепіҒееа.іёетмѕ [Ећ1іѕ.ібеют1пех], 
еһіѕ. Ғееаіїпаех, 
с51$.1Ссеп1паех, 
ЄҺіѕ.орііопѕ.гѕѕҒееаѕ.1епадёһ )3 
с615$ .дееГауек (іһіѕ.уіѕір1еІауег) .іппегнтмі = хззтеему\У1ем; 
Єєһіѕ.Ғаде1п( ©61$.\у1$151еГауек, 
ећ1іѕ.ргіпоуіѕір1еІауегтотор.ріпа (651$) ); 











— + 





Как видите, метод ирӣаїеуіеу() делегирует всю тяжелую работу классу 
представления, вызывая экземпляр этого класса и используя его как значе- 
ние свойства шпегНТМГ, видимого слоя (в конечном счете это приводит к по- 
степенному проявлению данного слоя). Три строчки кода. Совсем немного. 
Обратите внимание на то, что как только слой попадает в поле зрения, мы 
вызываем метод завершения работы бгіпе\Уіѕіб1е[ауегТоТор. Этот метод 
обновляет стилевое свойство слоя 7 [ш4ех, вследствие чего данный слой стано- 
вится выше другого, постепенно его затеняя. Реализация функции Бгіпе\іѕ- 
16]еГауегГоТор () выглядит следующим образом: 


бгіпеУіѕіЫеГауегТоТор: РапсНоп() { 
{61$.2е Г ауег(1015$.у15$101еГауег).51у1е.71п4ех = 10; 
{015.се(Тауег( (161$.%15101еГауег+ 1)%2).$1у1е.71шАех = 5; 


Вот и все, что можно сделать с точки зрения работы с пользовательским 
интерфейсом. Разделяя обязанности между классами модели, представления 
и контроллера, мы смогли получить простую управляемую архитектуру. 


13.7.4. Выводы 


Реструктуризация заключается в таком изменении кода, чтобы мы получи- 
ли МУС-представление нашего приложения для чтения В$55-лент. Мы созда- 
ли класс модели К55Еее4, инкапсулирующий концепцию К55-ленты, кроме 
того, создали класс К55Цет. Для инкапсуляции концепции представления 
элемента К$5Цет в контексте родительского элемента К5ЗЕее был создан 
класс представления К55Цет\Ме\у. Наконец, мы связали классы модели и 
представления с помощью класса контроллера К55 Кеайег, объединяющего 
управление событиями и реализацию слайд-шоу с эффектами перехода. 


13.8. Резюме 





В данной главе инфраструктура Адах позволила получать информацию непо- 
средственно с рабочего стола, не требуя коммерческого клиентского прило- 
жения, экономя наши деньги и позволяя настраивать решение согласно на- 
сущным потребностям. Нам удалось загрузить несколько ХМГ-файлов и по- 
лучить при этом только ту информацию, которая нас интересует. Мы разра- 
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ютали НТМГ-каркас приложения и применили правила С5$, что позволило 
сегко настраивать внешний вид программы. Используя ОНТМГ, мы смогли 
>азработать богатый пользовательский интерфейс, позволяющий пользовате- 
им пропускать сообщения, приостанавливать их поток, а также добавлять 
ю мере необходимости новые ленты. Все это стало возможным благодаря ин- 
фраструктуре Ајах, разрешившей получать В$55-ленты с Уеб-сайтов. Изме- 
шв несколько операторов, мы можем легко настроить приложения на чтение 
побой ХМГ-ленты. Кроме того, можно разрабатывать собственные форматы 
“СМІ. для отображения новостей, рекламы и всего остального, что обычно раз- 
летается на У!еБ-сайтах. Наконец, мы провели реструктуризацию сценария 
;огласно архитектуре "модель-представление-контроллер" (МУС), повысив 
штаемость и удобство эксплуатации кода. 
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Работать с технологией Адах очень просто. Для выполнения всей работы вам 
потребуется лишь небольшой набор инструментов. Вообще, сложные при- 
ложения Ајах можно создавать, используя только Мер-браузер, текстовый 
редактор и имея доступ к УеБ-серверу (который располагается либо на ва- 
шем компьютере, либо на каком-то Мер-сайте, к которому вы имеет доступ). 
Тем не менее хороший набор инструментов очень важен для программи- 
ста, поэтому в настоящее время существует несколько таких довольно слож- 
ных наборов. 

В настоящее время специализированных интегрированных сред разра- 
ботки (Пиеогайеа Оеуеортет Епуігоптепі — ТЕ) Ајах не существует, хотя 
со временем они, скорее всего, появятся. Однако есть несколько инструмен- 
тов разработки, предлагающих поддержку некоторых составляющих процес- 
са разработки Ајах-продукта. В данном приложении представлен обзор до- 
ступных типов инструментов и рассказывается, как с их помощью разумнее 
и быстрее организовать свою работу. 


АЛ. Правильный набор инструментов 


Правильно подобранные инструменты разработки могут оказаться бесцен- 
ными с точки зрения ускорения повторяющихся или сложных процессов и 
оказать огромнейшее влияние на производительность разработчика. "Непра- 
вильные" инструменты могут отвлекать внимание от необходимой работы, 
ограничивать возможности и вынуждать разработчика использовать только 
определенные процессы или совмещать в действительности несовместимые 
вещи. Различные разработчики предпочитают разные инструменты, которые, 
к тому же могут быть более или менее удачными для различных типов проек- 
тов. Иногда разработчику стоит потратить немного своего времени и выбрать 
набор инструментов, лучше всего подходящий для поставленной задачи. По- 
жалуй, лучше всего данную мысль сформулировал Авраам Линкольн: 

"Если мне дадут шесть часов на то, чтобы срубить дерево, первые четыре 
из них я потрачу на затачивание топора". 

Если вы будете поступать по такому же принципу, отдача может быть 
огромной. Разумеется, важно соблюдать и разумное соотношение между от- 
ладкой инструментов и их использованием, особенно если речь идет о нестан- 
дартной промежуточной ситуации, например, как в случае с существующими 
инструментами Ајах. 


А. 1.1. Получение совместимых инструментов 


В настоящее время доступно множество инструментов в виде бесплатных 
пакетов, проектов с открытым исходным кодом и коммерческих продук- 
тов. Мощных специализированных инструментов, предназначенных исклю- 
чительно для Ајах, пока что не существует, однако имеются средства раз- 
работки \УеБ-приложений, многие из которых поддерживают Лауазсирь, 
НТМГ и С$5$. 
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Как уже говорилось в главе 1, Ајах использует те лее технологии, что 
и классическое М№еБ-приложение, правда, несколько непривычным способом. 
Приложение Ајах построено не как набор небольших последовательных стра- 
ниц, а как несколько страниц (чаще всего одна), выполняющих в ответ на 
действия пользователя разнообразные программные переходы и в фоновом 
режиме асинхронно общающихся с сервером. Кроме того, поскольку в ходе 
описанного процессе генерируется довольно много ЈауаЅсгірі-кода, програм- 
мист Ајах, скорее всего, будет опираться на структуры ЈауаЅсгірі (наиболее 
популярные из них описаны в главе 3). 

Вследствие подобных отличий классического МеБ-приложения и прило- 
жения Адах возникают два момента. Во-первых, инструмент может предпо- 
лагать наличие основанных на страницах процессов, применение которых 
в Ајах-приложении нецелесообразно. Во-вторых, поддержка ЈауаЅсгірі может 
опираться на использование определенного набора функций или схем кодиро- 
вания, несовместимых с выбранными пользователем структурами сторонних 
производителей. 


Таким образом, отличия преимущественно связаны с высокоуровневой 
структурой приложения, а не с его деталями. Кроме того, два обозначенных 
момента скорее всего относятся к сложным инструментам (например, ІШЕ), 
а не к более простым средствам, подобным текстовому редактору с поддерж- 
кой ЈауаЅсгірі. 

В общем, выбирая инструменты для своего проекта Ајах, помните о том, 
что мы сказали. К этому вопросу мы еще вернемся, когда будем рассматри- 
вать различные инструменты, представленные на рынке. 

Наконец, стоит отметить, что многие существующие инструменты ха- 
рактеризуются возможностью расширения с помощью различных включае- 
мых модулей (рІџе-іп). Сложные инструменты, например универсальные ІрЕ 
и МеБ-браузеры, по-разному используются различными категориями пользо- 
вателей. Расширения позволяют модифицировать стандартное приложение, 
оснащая его функциями, требуемыми конкретным пользователям, при этом 
стандартный набор возможностей не затрагивается, приложение просто ста- 
новится более мощным, включая функциональные возможности, не реали- 
зованные первоначальной командой разработчиков. Существуют два достой- 
ных упоминания класса расширений — ЕсПрзе ШЕ, который, хотя и является 
преимущественно инструментом Јауа-разработчика, поддерживает благодаря 
расширениям богатый диапазон функциональных возможностей Ајах, и бра- 
узер ЕшеЮх, сообщество пользователей которого разрабатывает модули (или 
расширения), в частности, предназначенные для М№еб-разработчиков. 


Сообщества разработчиков модулей для ЕсИрзе и ЕтеЮх достаточно ве- 
лики, так что вы вполне можете найти готовое расширение, более-менее отве- 
чающее вашим требованиям. Кроме того, в среде У\еБ-разработки и вычис- 
лительных технологий существует традиция создания индивидуальных ин- 
струментов, поддержанию которой способствует и технология расширений. 
Рассмотрим эту традицию более подробно. 
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А.1.2. Создание собственных инструментов 


В качестве альтернативы покупному или загружаемому готовому инструмен- 
ту вы всегда можете создать свой. После сказанного выше об ШЕ и о полно- 
масштабных инструментах это может звучать устрашающе и нереалистично. 
Разумеется, мы не считаем, что проект Адах следует начинать с написания 
собственной ШЕ! 

В культуре Чшх имеется давняя традиция разработки небольших инстру- 
ментов, выполняющих одну небольшую работу. Инструменты подобного типа 
легко создать, потратив совсем немного времени, и сопровождение данных 
средств также не представляет особых проблем. В качестве примеров таких 
инструментов можно привести классы секундомера, которые мы разработа- 
ли для профилирования ЈауаЅсгірі-кода в главе 7, а также консоль вывода 
информации, которую мы продемонстрируем в разделе А.3.4. 

Инструменты, написанные на ЈауаЅсгірї, и другие технологии Адах хоро- 
ши тем, что их можно переносить на любой браузер. Однако возможности, 
доступные в браузере, существенно ограничены "благодаря" модели безопас- 
ности Јауа$сгірї (см. главу 6). Иногда имеет смысл создать инструмент в виде 
самодостаточной программы, используя .МЕТ, Јауа или любой другой язык 
программирования. Если вы решили поступить именно так, вам помогут от- 
ладчики НТТР, описанные в разделе А.З3.З3. 


Промежуточным подходом между созданием инструментов в браузе- 
ре и написанием самодостаточной программы является разработка модуля. 
Многие современные большие средства №\еБ-разработки поддерживают со- 
здание модулей, причем некоторые позволяют делать это довольно легко. 
Как отмечалось в предыдущем разделе, здесь выделяются ЮЕ ЕсПрзе и У№еБ- 
браузер Еігеѓох. ЕсИрзе даже предлагает набор модулей, связанных со стан- 
дартным загружаемым приложением, которые облегчают написание новых 
модулей. Тем не менее разрабатывать модули сложнее, чем инструменты, 
встроенные в браузер, и, пожалуй, это оправдано только тогда, когда речь 
идет о фрагменте большого проекта. 


При создании Ајах-приложения полезными могут оказаться множество 
инструментов. В настоящее время они разрознены; и процесс их актив- 
ного сопровождения требует постоянного внимания. Остановимся на этом 
моменте подробнее, а затем рассмотрим несколько заслуживающих внима- 
ния инструментов 


А. 1.3. Сопровождение набора инструментов 


Как уже отмечалось выше, инструменты Ајах обрывочны, что несколько 
непривычно для программистов Јауа и МЕТ, привыкших опираться на удоб- 
ный набор ЕсПрзе, МеВеапз или Міѕџа] За 410. 

Разработчики сами должны заботиться о том, чтобы их наборы инстру- 
ментов не устаревали. Поскольку центра притяжения в виде фактического 
стандарта ГЕ не существует, данная задача является более проблематичной, 
чем хотелось бы, поэтому в общем случае приходится полагаться на знако- 
мых, рассылки, информационные порталы, блоги и другие распределенные 
средства передачи информации, существующие в Интернете. 


Приложение А. Инструменты для профессиональной работы с А/ах 575 


Наиболее важным инструментом любого разработчика является редак- 
тор, в котором он набирает свой код. Рассмотрим, что собой представляет 
несколько популярных редакторов. 


А.2. Редакторы и РЕ 


Сложность инструментов, используемых для редактирования кода, варьиру- 
ется в очень широких пределах — от простой программы Моераа (Блокнот) 
для сложных интегрированных сред разработки, различным образом моде- 
лирующих объекты кода. ЈауаЅсгірі, НТМЕ и С$5 поддерживаются не так 
хорошо, как промышленные языки, подобные С#, Міѕџа! Ваѕіс и Јауа, одна- 
ко диапазон предлагаемых функциональных возможностей достаточно ши- 
рок, чтобы было из чего выбирать. Давайте посмотрим, какие типы функ- 
ций могут нам потребоваться, а затем изучим доступные на сегодняшний 
день продукты. 


А.2.1. Что требуется от редактора кода 


Редакторы кода могут многое, возможно, даже слишком многое. Значитель- 
ная часть этих возможностей предназначена для удовлетворения индивиду- 
альных запросов пользователей. Из-за этого одни разработчики предпочи- 
тают простой инструмент обработки текста; другие любят визуальные под- 
сказки и ключи полномасштабной интегрированной среды разработки. От- 
носительно поддержки кода Ајах (т.е. кода НТМГ, С$5 и ЈауаЅсгірі) можно 
отметить, что помощь редактора может выражаться несколькими способами. 
Многие из них могут показаться имитацией содержимого классического МеБ- 
приложения, однако поскольку код классического приложения Ајах обычно 
больше и имеет более четкую структуру, поддержка редактором структури- 
рования приобретает первостепенное значение. Итак, перечислим полезные 
элементы, которые стоит иметь хорошему редактору кода. 


Работа с несколькими файлами 


Данное требование является стандартным, однако в любом случае упомянуть 
о нем стоит. Проекты Ајах обычно составлены из большого числа файлов, 
поэтому редактор, не позволяющий одновременно работать с несколькими 
файлами или буферами (как УМш4о\з М№Моѓераа), очень быстро станет раз- 
дражать. Практически все редакторы кода позволяют открывать несколько 
файлов, доступ к которым осуществляется через расположенные рядом за- 
кладки, панель выбора или другое похожее средство. 


Подсветка синтаксиса 


Как и ранее, визуальное выделение синтаксиса в настоящее время является 
одной из стандартных возможностей, которую поддерживает большинство 
редакторов программного кода. Под данной возможностью понимается вы- 
деление цветом, курсивом или обозначение любым другим образом ключевых 
слов языка, символов, строк в кавычках и комментариев, облегчающее чте- 
ние кода. 


Большинство редакторов поддерживает выделение синтаксиса различных 
языков с помощью цветов; часто файлы-определения синтаксиса можно под- 
ключать как модули. Одной из характерных особенностей программирования 
Ајах является использование нескольких языков. На стороне клиента задей- 
ствованы НТМГ. С$$, ХМІ и ЈауаЅсгірі (все они только выигрывают от ви- 
зуального выделения синтаксиса), кроме того, применяется часть (или все) 
языков из следующего набора: Јауа, С#, УВ и более сложные АЅР, РНР и ЈЅР 
(в которых чередуются блоки "родного" кода и НТМГ-разметки). Отметим, 
что выделение синтаксиса полного набора языков, используемых в проектах 
Ајах, поддерживается не во всех редакторах. 


Поддержка кода высокого уровня 


Расцвечивание кода предлагает хорошие визуальные подсказки, однако неко- 
торые редакторы на этом не останавливаются и моделируют код на более 
высоком уровне объявлений объектов, функций и методов. Такой подход 
позволяет создавать множество новых инструментов, например, планиров- 
щиков, резюмирующих содержимое файла, средств навигации (карт иерар- 
хии объектов), кроме того, с помощью средств поиска можно определять, 
когда используется конкретное свойство либо вызывается некоторый метод 
или функция. Когда код начинает разрастаться, инструменты подобного типа 
просто незаменимы. 


Инструменты организации проекта 


Некоторые интегрированные среды разработки идут дальше моделирования 
определений отдельных объектов и позволяют интегрировано управлять всем 
кодом проекта, распознавая связи между различными компонентами и ресур- 
сами, объединение которых и дает конечный продукт. Основным преимуще- 
ством такого подхода в интегрированной среде разработки для компилиру- 
емого языка является возможность создания всего проекта в исполняемой 
форме, однако это не принципиально, когда речь идет об Ајах, где все ре- 
сурсы клиентской части приложения разворачиваются в форме, удобной для 
восприятия человеком. Тем не менее такая возможность может быть полезна 
при работе с кодом серверной части приложения. 

Кроме того, с помощью средств организации проектов можно развернуть 
проект на У\еБ-сервере и даже управлять самим У№Б-сервером (либо кон- 
тролируя внешний сервер посредством удаленных вызовов процедур, либо 
внедрив простой сервер в интегрированную среду разработки). Инструмент, 
поддерживающий код на уровне проекта, может освободить разработчика от 
задачи сопровождения системы создания-развертывания. 


Управление версиями 


Управление версиями является необходимостью в больших проектах и "хоро- 
шим тоном" в проектах любого размера. Сами по себе системы управления 
версиями обычно работают с текстовыми и бинарными файлами, не особо 
вникая в их высокоуровневую семантику, поэтому назвать продукт, который 


Приложение А. Инструменты для профессиональной работы с Ајах 


лучше других подойдет именно для приложений Ајах, весьма затруднител! 
но. В любом случае наличие в вашем наборе инструментов хорошего средств 
управления версии не помешает. 


Разработка на нескольких языках: интеграция клиента и сервера 


Как отмечалось ранее, многие проекты Ајах требуют помимо развертывЕ 
ния множества технологий МеБ-браузеров наличия серверного компонент? 
Вы можете написать серверную часть на ЈауаЅсгірі, но это не принято, та 
как обычно разработчики Ајах-приложений используют на стороне клиент 
и сервера различные языки. Для кодирования клиентской и серверной част 
приложения можно использовать два абсолютно разных набора инструмен 
тов, но некоторые типичные задачи взаимодействия включают быстрое пе 
реключение уровней, поэтому редактор, поддерживающий все используемы 
языки, может оказаться весьма кстати. 


Таким образом, мы указали основные критерии, определяющие выбој] 
редактора кода, представляющего собой либо простой тестовый редактор 
либо интегрированную среду разработки. В следующем разделе рассмотре! 
ряд инструментов, существовавших на момент написания книги. 


Двусторонний визуальный дизайн 


Многие инструменты УеБ-дизайна предлагают УУЗГУМУС-средства визуаль 
ной разработки М№ер-страниц. Данные средства хорошо подходят для созда- 
ния прототипов, но обычно они плохо реагируют на более динамический под- 
ход Ајах к переупорядочению пользовательского интерфейса путем манипу- 
ляций с РОМ. Большинство визуальных редакторов также позволяет про- 
граммисту переключаться на просмотр НТМГ-кода в текстовом виде. Если 
при работе над Ајах-приложением вы используете подобные средства, обра- 
тите внимание на то, чтобы они сохраняли элементы, которые не понимают. 
в частности, комментарии и специальные дескрипторы и атрибуты, которые 
могут использоваться кодом ЈауаЅсгірі для переупорядочения дерева РОМ. 


А.2.2. Существующие продукты 


Технологии Ајах поддерживаются несколькими текстовыми редакторами. 
Наше рассмотрение начнется с редакторов для программистов, затем будут 
изучены более сложные интегрированные среды разработки. 


Текстовые редакторы 


В настоящее время существует множество текстовых редакторов с открытым 
исходным кодом, бесплатных или условно-бесплатных, предназначенных для 
различных операционных систем. В качестве бесплатно распространяемых 
инструментов можно назвать ТехіРаа, Мо{ераа2, ЕаиР!аз, ветеранов Чшх 
Ут и Етасѕ, а также расширяемое межплатформенное средство ]Еаи, мо- 
дульная система которого позволяет создавать что-то, подобное интегриро- 
ванным средам разработки. Несколько распространенных текстовых редак- 
торов с поддержкой ЈауаЅсгірі показано на рис. АЛ. 
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Рис. А.1. Текстовые редакторы, предлагающие подсветку синтаксиса Јама$сгірї (слева направо): 
ТехіРаа, смт и јЕаій 


ТехіРаа предлагает потрясающе разнообразную баз}' файлов с определе- 
ниями синтаксиса, включающую несколько файлов для С5$, ЈауаЅсгірі, ХМІ. 
и НТМІ, а также наиболее популярных серверных языков. Имеется мини- 
мальная поддержка запуска в текущем файле определенных пользователем 
команд (например, компиляторов). ТехіРаа работает только в операцион- 
ной системе Місгоѕой М№Міпаоуѕ. Сходные возможности предлагают и средства 
МоѓеРаа2 и ЕаірРі1оѕ. 

Инструмент јЕаії создан на основе Јауа; его можно запускать на любой 
платформе, поддерживающей этот язык. Данное средство позволяет визу- 
ально выделять синтаксис более 100 языков, включая все основные языки, 
используемые в Ајах-проектах. Использование системы модулей позволяет 
получать дополнительные возможности, хорошо интегрирующиеся в систему. 
Модули допускают автоматическую навигацию, загрузку и установку непо- 
средственно из] Еай. Существуют полезные модули, предлагающие проверку 
синтаксиса, поддержку отладчиков, компиляторов и интерфейсов управле- 
ния версиями, а также специальную поддержку С58 и ХТ. 
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Рис. А.2. Модуль Јамабсгірі-редактора для Есіірѕе предлагает элементарную поддержку 
контурного представления объектов Јауа5сгірї, но не позволяет в полной мере обрабатывать 
объектно-ориентированный синтаксис 


Уіт и Етасѕ представляют собой мощные расширяемые текстовые ре- 
дакторы, поддерживающие традиции операционных систем Опіх (хотя для 
обоих инструментов существуют и УИп4до\з-версии). Оба средства включа- 
ют доскональный режим поддержки ЈауаЅсгірі-кодирования. 


Интегрированные среды разработки 


Корпоративные языки программирования, подобные .МЕТ и Јауа, имеют ин- 
тегрированные среды разработки с долгой историей. Соответствующий ры- 
нок достаточно развит, а в последние годы на нем появилось несколько бога- 
тых бесплатных интегрированных сред разработки с открытым исходным 
кодом. Среды, предназначенные для серверных языков, часто достаточно 
расширяемы, чтобы поддерживать и разработку клиентских частей Ајах- 
приложений. 

Основным представителем технологий Місгоѕой является средство У151а1 
5410, поддерживающее У№-разработки с помощью компонента Міѕџа! Ш- 
{егОеу, понимающего языки ЈауаЅсгірі и С$5. Не так давно стали бесплат- 
но распространяться урезанные версии данного продукта (Міѕџа! Ѕіџаіо Ех- 
ргеѕѕ), в том числе версия, предназначенная для М№еБ-разработчиков. 

Наиболее известной ШЕ Јауа-приложений является средство ЕсПрзе, под- 
держиваемое ВМ, — инструмент, предназначенный преимущественно для 
разработки Јауа-приложений и снабженный сложным набором модулей, ко- 
торые написаны конкретно для Јауа-разработчиков. Семейство данных мо- 
дулей развивается довольно бурно и включает несколько относительно про- 
стых Јауа$сгірі-модулей, обеспечивающих визуальное выделение синтаксиса 
и контурное представление методов и классов (рис. А.2). 

В ЕсПрзе 3.1 (часть проекта №еЬ Тоо!5 РІаіѓогт) был разработан бога- 
тый набор модулей для М№еБ-разработчиков; данный проект предлагает так- 
же поддержку серверных технологий Ј2ЕЕ, редакторы для ЈауаЅсгірі, ХМГ, 
НТМІ и С$5. Кроме того, ЕсИрзе предлагает богатые возможности управле- 
ния кодом на уровне проекта и полную интеграцию с новейшим средством 
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управления версиями СУ$. Помимо этого, допускается интеграция с продук- 
тами других производителей — Зибует$юп. \У15иа| ЅошсеЅаѓе и другими си- 
стемами управления версиями. 

Некоторые корпоративные средства Јауа-разработки, подобные Зип Јауа 
5[а1о Сгеабог и ЗАР М№Мееауег. предлагают для У№еб-приложений высоко- 
уровневые средства дизайна. Исходя из собственного опыта, можем заметить, 
что данные средства основаны преимущественно на классической метафоре 
У!е6-приложения, которое моделируется как ряд дискретных страниц, поэто- 
му такие продукты могут плохо согласовываться с подходом Ајах. Впрочем, 
э[а41о Сгеатог использует технологию Јауа ЗегуегЕасез (]3Е), взаимосвязь ко- 
торой с Ајах обсуждалась в главе 5, и хотя для обеспечения полного взаимо- 
действия двух указанных технологий необходимо разрешить определенные 
проблемы, может случиться так, что в ближайшем будущем инструменты, 
основанные на ЈЅЕ, обзаведутся лучшей поддержкой Ајах. 

Если подножие Ајах располагается в лагере корпоративных разработок, 
то корни данной технологии уходят в сообщество Мер-дизайна, использую- 
щее совершенно иной набор инструментов. В данной среде выделяются про- 
дукты Масготе Ча Огеатуеауег и Місгоѕоќ ЕгопіРаве, к тому же поддержи- 
вающие стандартные клиентские технологии, которые используются Ајах. 
Отеатуеауег предлагает хорошую поддержку стандартных средств редакти- 
рования Јауа$Ѕсгірі- и С5$-кода (рис. А.З) и двусторонний НТМТ-редактор с 
визуальным и текстовым режимом, однако если речь идет о гармоническом 
ҰҮЅТҰҮС-сочетании сложных пользовательских интерфейсов Јауа$сгірі, то 
приложение поддерживает только собственную библиотеку кода. Интеграция 
в проект Огеат\уеауег или ЕгопРазе библиотек других производителей (на- 
пример, х. Ргоѓоѓуре и Кісо) потребует кропотливого изучения сценариев, ис- 
пользования возможностей текстового редактора и кое-какой мелкой работы. 


В завершение стоит еще упомянуть инструмент Кото4о (АсіуеЅіаїе) — 
поддерживающую несколько языков (Рей, Ру Шоп, РНР, Те, ЈауаЅсгірі 
и ХЅІ7Т) интегрированную среду разработки для подготовки сценариев. Под- 
держка Кото4о навигации по коду Јауа$сгірі просто великолепна; имеет- 
ся сложный режим структуры, распознающий классы, функции и методы 
Јауа$сгірі (рис. А.4). Поскольку данная среда является универсальной, она 
поддерживает только общий язык ЈауаЅсгірі, но не его реализации в брау- 
зерах. Поэтому инструмент наиболее полезен при разработке моделей пред- 
метной области для Ајах. Кото4о — это коммерческий продукт с бесплат- 
ной пробной версией. Кстати, интересный факт: пользовательский интерфейс 
Копо4до создан с использованием основанного на ХМІ. набора инструментов 
ХОГ, который применялся для разработки М№еБ-браузера Еігеѓох. 


В следующем разделе мы рассмотрим отладчик исходного кода — еше 
один ключевой инструмент из арсенала разработчика. 


АЗ. Отладчики 


Поведение простых компьютерных программ часто можно понять, изучая их 
код. однако большие и более сложные программы часто слишком велики, 
чтобы их можно было охватить сразу С помощью инструментов отладки вы 


Рис. А.З. Редактор приложения Огеатмеаумег поддерживает Јауабсгірї и С55 На правой верхней 
панели расположен редактируемый файл С55; на левой верней панели тот же документ 
представлен в режиме структуры 


Рис. А.4. Интегрированная среда разработки Котоао предлагает 

высококачественные средства представления структуры для объектов Јауа$сгірї и 
может понимать множество идиом кодирования На рисунке показано, что данное 
средство распознало ряд функций, принадлежащих к прототипу ОБ] ес+{\1емег 
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можете контролировать поток выполнения одного фрагмента запущенного 
кода, позволяя останавливать и запускать его вручную, а также изучая со- 
стояние программы в процессе выполнения. 


АЗ.1 Для чего нужен отладчик 


С помощью отладчиков можно на практике разобраться, что делает програм- 
ма. При работе над любым проектом с помощью отладчика можно проверить, 
правильно ли вы понимаете фрагмент кода, что особенно полезно при разра- 
ботке Ајах-приложений. 

При использовании термина "отладчик" большинство разработчиков 
подразумевают отладчики исходного кода, и действительно, отладчики 
ЈауаЅсгірі-кода и серверных приложений весьма полезны при написании 
Ајах-проектов. Тем не менее отладке поддается и сетевой трафик, посколь- 
ку НТТР-код Ајах-приложений может быть на удивление сложным. В сле- 
дующих разделах мы рассмотрим инструменты отладки и исходного кода, 
и НТТР-кода. Начнем с изучения отладчиков ЈауаЅсгірі. 


А.3.2. Отладчики Јакабсгірї 


Возможность отладки ЈауаЅсгірі-кода особенно полезна из-за изменчивости 
данного языка. Программисты, использующие С# или Јауа, обычно узнают, 
какие свойства и методы доступны на данном объекте, изучая его определе- 
ние класса, также они могут определить число и тип аргументов метода. При 
работе же с ЈауаЅсгірі-кодом не всегда можно выяснить, с каким числом ар- 
гументов должна вызываться функция и в какие переменные превратятся эти 
аргументы внутри функции. Последний момент представляет особые пробле- 
мы с точки зрения обработчиков обратных вызовов, в которых вызов функ- 
ции может инициироваться неизвестным объектом или самим браузером. 

В простейшем случае отладчик исходного кода позволяет пользователю 
устанавливать точки прерывания, останавливающие выполнение программы 
и передавая управление в руки пользователя при выполнении данной стро- 
ки кода. Таким образом, пользователь может построчно проследить за вы- 
полнением кода, изучая значения переменных в их области видимости или 
возобновляя нормальное выполнение кода до следующей точки прерывания. 
В ЈауаЅсгірі точки прерывания могут устанавливаться самим отладчиком 
или программистом, добавляющим в код оператор іебиеорег. Например, рас- 
смотрим, как браузер выполняет следующий код: 

уаг х=3; 

уаг у=х*7,- 

даероддех; 

уар 221ү; 

На третьей строке кода (рис. А.5) контроль над выполнением кода будет пере- 
дан любому отладчику, зарегистрированному в браузере. В это время можно 
эудет увидеть значения переменных х и у. Поскольку переменная 2 к это- 
чу моменту еще не объявлена, ее значение можно будет исследовать только 
тосле того, как пользователь "перешагнет" через четвертую строку кода. 
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Рис. А.5. Использование оператора дебиддег Е алај 
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(Јамабсгірї) позволяет программно инициировать 
точку прерывания 





В общем, так и выглядят основные возможности средства отладки исход- 
ного кода. Как показано ниже, более сложный отладчик может предлагать 
более богатый набор возможностей. 


Навигация по стеку вызовов 


В ЈауаЅсгірі при выполнении функции создается новый контекст выполнения, 
имеющий собственный набор локальных переменных. Если отладчик преры- 
вает процесс выполнения функции, он может видеть ее локальные перемен- 
ные, но не переменные функции, вызвавшей данную. Рассмотрим следующий 
пример: 

ЕорсЕ1оп аоАѕит() { 

уар а=3; 

уаг р=4; 

хаг с=ти1єір1у (а-2,0р+6); 
геёџгп {а+Ъ)/с; } 

Ғопсёіоп пи1іёір1у (уагі,уаг2) { 
уаг п1=рагѕеғҒ1оаї (хаг); 

уаг п2=рагѕеҒіоаї (уаг2); 
аебоадег; 

геїокп пі*п2; } 

В момент остановки отладчиком процесса выполнения мы видим пере- 
менные п, п2, уа!| и уаг2. Изучая проблемы нашей программы, мы можем 
подумать, что они связаны с аргументами, переданными функции. Следо- 
вательно, нам нужно узнать, какие значения имеют переменные а и Б во 
внешнем методе іоАЅит(). Мы можем добавить новую точку прерывания 
в аоАЅшт() и снова запустить программу, но в сложном приложении возврат 
к данному состоянию может потребовать времени. Если отладчик поддер- 
живает навигацию по стеку вызовов, мы можем просто подняться по этому 
стеку до функции доАбитО и исследовать ее состояние точно так же, как 
если бы мы установили точку прерывания в третьей строке на вызове функ- 
ции шиИ1р/у () (рис. А.6). В сложной программе стек вызовов может быть 
довольно глубоким, поэтому здесь особенно полезна способность отладчика 
перемещаться вверх-вниз по всем уровням. 


Наблюдающие выражения 


Некоторые инструменты отладки могут вычислять значения выражений на 
лету и позволяют пользователю предопределить кодовые выражения, кото- 
рые будут пересчитываться по мере прохода отладчика по коду. Эти выраже- 





Рис. А.б. Отладчик Мо2Ша Мепктап позволяет исследовать локальные 
переменные в функциях, находящихся в стеке вызовов выше текущей 
точки выполнения 
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гаем, что проблема связана с тем, что на каком-то шаге делитель становится 
равен нулю, однако не знаем, когда это происходит. 

Мы можем установить точку прерывания внутри цикла. 

Ғог (уаг 1=0;1<100;1++){ 

уаг іуіѕог=і-57; 
аебиоерег; 

уаг уа1=42 /іуіѕог; 
рІоїОпбСгарійћ,уа1); 

} 

Однако в таком случае нам придется многократно щелкать на кнопке 
"Продолжить", пока отладчик не доберется до итерации, на которой появля- 
ется ошибка. Можно поступить умнее и проверить в коде наличие ошибки. 

Ғог (уаг 1=0;1<100;1++){ 

уаг іуіѕог=і-57; 
Ш (аіуіѕог^=0){ аебиррег; } 
уаг уа1=42 /41у150г; 

рІоїОпбСгарһ(1,уа1); 

Так мы сразу перейдем на пятьдесят седьмую итерацию цикла — ту, на 
которой происходит сбой. Данное решение можно назвать условным прерыва- 
нием, т.е. поток выполнения программы прерывается только при выполнении 
определенного условия. 

Условия подобного типа можно устанавливать, только модифицируя код. 
Тем не менее, если присваивать точки прерывания с помощью ШЕ отладчика, 
условия на эти точки можно задать независимо от реального кода (рис. А.7). 
Данная возможность поддерживается некоторыми отладчиками, которые 
позволяют пользователю привязывать к точке прерывания выражение и оста- 
навливать поток, только если значение этого выражения равно гие. 


Изменение значений переменных 


При появлении ошибки выполнение программы прекращается. Предполо- 
жим, что в ходе сеанса отладки мы поняли, как решить данную проблему, 
но хотим продолжить выполнение программы и проверить следующие фраг- 
менты кода при текущем наборе условий. 

Это возможно с некоторыми отладчиками, позволяющими считывать 
и записывать значения локальных переменных (рис. А.8). Допустим, что 
в приведенном выше примере мы разобрались, что проблема связана с де- 
лением на нуль в цикле, но желаем продолжить выполнение программы, 
чтобы изучить код, находящийся после цикла. В таком случае мы можем 
временно присвоить делителю значение 1, разрешив дальнейшее выполне- 
ние программы. 

Существует множество отладчиков для ЈауаЅсгірі-кода. В число бесплат- 
ных продуктов входит модуль Уепктап для Мо7Ша ЕшеЮх и Місгоѕой Ѕсгірі 
ОебБизоег {подробнее о нем — ниже, в разделе "Ресурсы") для Пицегпе{ Ехріогег. 
Модуль Уепктап поддерживает все описанные выше дополнительные функ- 
ции, в него также встроено средство профилирования, описанное в главе 7. 
Модуль Місгоѕой Ѕсгірі ОебБизеег поддерживает навигацию по стеку вызовов 





Рис. А.7. Задание условного прерывания в отладчике Моа Мепктап 
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Рис. А.8. Изменение значения переменной в работающей 
программе с помощью отладчика Мох а Мепктап 
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и "окно немедленного действия" для выполнения ЈауаЅсгірі-выражений на 
лету (в частности, организацию запросов и присвоение значений локальным 
переменным). 

Интегрированные среды разработки Міѕџа Ѕ0џйіо и Котойо также под- 
держивают отладчики ЈауаЅсгірі с богатым набором возможностей. 


Отладка серверных приложений 


Помимо отладки ЈауаЅсгірі-кода на стороне клиента, часто бывает прлезна 
отладка и серверной части кода. Интегрированные среды разработки прило- 
жений Јауа и .МЕТ обычно имеют высококачественные отладчики. Инстру- 
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Рис. А.Э. Расширение Мо7Ша ШуентТтТРНеадегѕ может регистрировать 
НТТР-трафик и представлять подробную информацию о заголовках запросов 
и ответов 


менты ЕсПрзе и Міѕџа! 59410 (как и большинство других ОЕ) предлагают 
прекрасные возможности отладки. Для отладки М№еЬ-приложений, основан- 
ных на Јауа, можно использовать сервер приложений ЈВоѕѕ и модули ЕсІірѕе, 
предлагающие простую систему развертывания и отладки Мер-приложений. 
Версии Міѕџа! За Чо, предназначенные для \№еБ-разработки, имеют встроен- 
ный УеБ-сервер с поддержкой АЗР.МЕТ. По нашему мнению, Міѕџа1 51410 — 
это единственная среда разработки, поддерживающая отладку клиентского 
и серверного кода с общим интерфейсом. 

Отметим, что часто бывает полезна еще и отладка сетевого трафика. Как 
и предыдущих случаях, существует множество бесплатных и коммерческих 
продуктов, которые подходят для этой цели. Рассмотрим их. 


А.3.3. Отладчики НТТР 


Взаимодействие клиента Ајах и МеБЬ-сервера осуществляется с помощью 
НТТР. Сама по себе реализация этого взаимодействия может оказаться слож- 
ной и стать источником ошибок. Иногда стоит перестраховаться и изучить 
НТТР-трафик, проверив заголовки, строки запроса, содержимое запроса 
и ответа, а также ход обмена данными. 


Расширение Шуе НТТР Неадег 


МохШа Еігеѓох поддерживает расширение ШуеНТТРНеайегѕ, которое может 
регистрировать НТТР-трафик, проходящий через браузер (рис. А.9). Заго- 
ловки запросов и ответов записываются и отображаются, также их можно 
экспортировать в виде текстовых файлов, что позволяет хранить информа- 
цию о сеансе Ајах. Кроме названных данных, записываются строки запросов 
из методов СЕТ и РОЅТ (однако содержимое ответа не сохраняется). 

ШуеНТТРНеайегѕ поддерживает только чтение заголовков. Существуют 
и другие расширения Еиеюх (например, МодИу Неадег$), позволяющие мо- 
дифицировать заголовки проходящих пакетов. 
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Расширение РНачег 


Компания М!сгозой Кеѕеагсһ недавно выпустила приложение ЕіайІег, осно- 
ванное на.МЕТ и предлагающее возможности, подобные аналогам ГлуеНТТР- 
Неааетѕ, но также допускающее запись заголовков в процессе передачи с по- 
мощью сценариев, написанных на ЈауаЅсгірі. Это похоже на возможность 
изменения некоторыми отладчиками значений в ходе сеанса, которую мож- 
но использовать для быстрого пропуска дефектов при отладке работающего 
приложения. 

В отличие от расширения ШіуеНТТРНеааегѕ, которое интегрируется в бра- 
узер, Еіааіег — это независимый процесс, действующий как посредник между 
клиентом и сервером. В таком качестве данный продукт можно использовать 
при любой комбинации браузера и У\еБ-сервера. 


Приложение Сһапеѕ 


Сһагеѕ — это условно-бесплатный инструмент, написанный на Јауа. Подобно 
Нафег, он действует как посредник между браузером и сервером. Он может 
регистрировать данные запроса и ответа (не только заголовки, но и содержи- 
мое), экспортировать сеансы в виде файлов электронных таблиц. Кроме того, 
это приложение предлагает встроенный инструмент формирования полосы 
пропускания со множеством настроек, который позволяет легко сымитиро- 
вать очень медленное соединение, когда клиент и сервер развернуты в очень 
быстрой локальной сети или даже на одном компьютере. 

В данной категории существует множество других полезных инструмен- 
тов, которые мы описывать не будем. Если Сћһапеѕ и ЕА4ег — это не то, что 
вам нужно, вы довольно быстро найдете в Интернете информацию о других 
полезных продуктах, например Е\егеа! или Арасһе ТСРМоп. 

На этом мы завершаем обзор готовых инструментов отладки. Объеди- 
няя отладчик серверного кода, отладчик ЈауаЅсгірі-кода на стороне клиента 
и отладчик НТТР между ними, можно перехватить выполнение приложения 
в любой точке его жизненного цикла и разобраться, что же оно на самом 
деле делает. 

По своей природе отладчики назойливы. Хотя они представляют собой 
довольно мощные инструменты, иногда предпочтительнее регистрация дей- 
ствий системы в фоновом режиме. Существует множество хороших струк- 
тур регистрации действий на сервере, например 1004) для Јауа производства 
Арасһе, но, повторимся, набор инструментов ЈауаЅсгірі является назойли- 
вым. Далее мы рассмотрим простое средство регистрации, написанное на 
Јауа$сгіріё, которое можно интегрировать в код браузера и использовать для 
записи невидимой деятельности. 


А.3.4. Создание консоли вывода, встроенной в браузер 


Отладчик позволяет разработчику очень подробно рассмотреть работающий 
код, однако он прерывает естественный поток событий. При отслеживании 
действий пользователя для тестирования практичности приложения ийи на- 
блюдения за выполнением кода в интегрированном цикле иногда полезнее 
регистрировать активность приложения, не прерывая поток. 


Приложение А. Инструменты для профессиональной работы с Ајах 589 


ҰүеБ-браузер ЈауаЅсгірі не предлагает встроенное средство регистрации. 
(При первом взгляде на консоль ЈауаЅсгірі в браузере Моа может пока- 
заться, что это не так, но записывать данные в нее могут только браузер 
и расширения.) 

В данном разделе описано, как написать собственную систему регистра- 
ции, и продемонстрировано ее использование в одном из примеров приложе- 
ний. Итак, сформулируем для начала наши требования. Мы не можем ве- 
сти запись в локальный файл из-за модели безопасности ЈауаЅсгірі, поэтому 
предпочитаем записывать информацию в консольный элемент, расположен- 
ный на экране. Кроме того, нам требуется возможность добавления в консоль 
сообщений. В идеальном случае при регистрации было бы неплохо исполь- 
зовать НТМГ-разметку и обычный текст. Кроме того, нам нужно очистить 
консоль от существующих сообщений. 


Не будем все усложнять — передадим элемент РОМ в качестве аргумента 
конструктору объекта. Благодаря этому расположение консоли можно будет 
определять в зависимости от страницы. Конструктор просто задает двусто- 
роннюю связь между элементом РОМ и самим объектом консоли. 


Сопѕоіе=йтсіоп(е1){ 
18.е1=аоситепї. веіВІетеп(Ву!@ (е1); 
(015.е1.с1аззМате='сопзо]е' ; 
1һіѕ.е1.сопѕоіеМоае1=#1һ1; 
418.сІеаг(); 


Чтобы добавить информацию на консоль, мы передаем указанной функ- 
ции аргумент, который может быть текстовой строкой или элементом РОМ, 
при необходимости передавая также имя класса С85. 

Сопѕо1е.ргоѓоѓуре.аррепа=ѓипсііоп(обј,ѕќу1е){ 

уаг ӢотЕ1=5ѓуіпе.іоООоМмЕІетепі(обј); 
Ш (51) { 
от Е1.с1аз$Кате=$У1е; 


} 


Єћіѕ.е1.аррепасһі1а (аотЕ1); 

} 

Метод орОМЕетені () вызывает общую функцию стилевого оформления, 
которая обеспечивает представление сообщения в виде элемента РОМ. Если 
аргумент уже является элементом РОМ, функция ничего не делает, если он 
является строкой, то последняя заключается в элемент іу. 








зЕу11па . Е орОМЕ1 епепе =ЕайсЕ1от (орј) { 
уар геѕи1ё=пи11; 
1Е (00) лозбапсеоЕ Е1етмепі) { 
геѕи1ё=орј; 
}е1зе{ 
уаг ёхЕМоде=ӣоситепё . сгеаёсеТехіМоае (гіпо (орј)); 
уаг игаррег=аосопепё .сгеасеЕ1етепе ('Яіу') ; 
игаррег .аррепасһі1а (Е хЕМоае); 
геѕи1іі=игаррег; 














} 


геёогп гезо1е; 
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Чтобы очистить консоль, мы последовательно удаляем все ее дочерние 
элементы. 


Сопѕо1е.ргоіоіуре.сЈеаг=ѓғипсіїіоп{) Е 
хћі1е (Еһіѕ.е1.#ігѕісһі1а) { 
ЕҺіѕ.е1.гетоуесһі1а{ЕһҺіѕ.е1.Ғігѕёсһі1а) ; 


} 

Таким образом мы получаем простую реализацию регистрирующей кон- 
соли, встроенной в браузер. Посмотрим, как она используется на примере 
проекта ОбјесіМіемег (см. главы 4 и 5). Прежде всего определим на странице 
элемент РОМ, который будет содержать регистрирующую консоль. 

<аіу 1а= сопѕо1е'х/аіу> 

Далее зададим класс С5$, отвечающий за расположение консоли на 
экране. 


аіу.сопѕоІе { 


роѕіїіоп .-аБѕоіиџѓе; 1 
{ор:32рх; / 
1ей:600рх; 


У\1ай:ЗООрх; 

Ве!1> БЕ: 500рх; 

оуег Йом: аито; 

Богаег: Ірх зоа БасКкК; 
Баскегоипа-соіог: #ееғОоё; 

} 

Здесь мы использовали абсолютное позиционирование; в общем случае 
можно применять любую технологию пользовательского интерфейса Адах. 
Затем необходимо создать регистрирующий объект. Для удобства в данном 
примере мы определим его в виде глобальной переменной. 

уаг 1оддег=пи11; 

мхіпаоу. опіоаа=Ёоцпсёіорп () { 


1одаег=пем Сопзѕо1е { "сопѕоіе"); 
1одсдег.аррепа{ "зіёакііпод р1Іапеёѕ арр"); 


} 

Мы инициализируем регистратор в событии \шао\.опоа, чтобы тре- 
буемый им элемент РОМ гарантированно был создан. Предположим те- 
перь, что мы хотим регистрировать сообщение при создании объектов планет 
в нашей модели предметной области. Для этого нам нужно вызвать 108- 
ег .аррепа() • 

рІапеѓѕ. РІапеі=ѓипсііоп 

(іа ,ѕуѕѓіет, пате ,Яіѕќапсе,іатеїег,ітаве)! 
11ѕ.іа=іа; 


Іоввег.аррепа("сгеаѓеа рІапеї објесі ' "+1һ15.пате+"'"); 


Подобным образом мы можем добавить в код ОбјесіМіемег (объект Соп- 
іепіоааег) команды регистрации, которые вызываются при изменении зна- 
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Рис. А.10. Консоль регистрации в действии — отслеживает создание объектов, сетевую 
активность, редактирование пользователем значений и тд. Чтобы продемонстрировать 
отображение сообщений, выделенных специальным стилем, мы добавили запрос 

к несуществующему серверному ресурсу тооп$ . хті 


чений и открытии всплывающих окон, при загрузке сетевых ресурсов и т.д., 
что позволит отслеживать поведение работающего кода. Важные сообщения, 
например, информацию о сетевых сбоях, можно выделять особым стилем. 


пеё. СопѓепіГ оааег.ргоѓоѓуре.аеѓаоЕггог=ѓипсііоп(){ 
Іоввег.аррепа("пеімогк еггог! "+1һіѕ.игі, "оигеепі"); 


На рис. АЛО показана регистрирующая консоль как часть модифициро- 
ванного приложения Објесі Міемег. 

На рисунке видно, насколько простым является введение регистрации в 
приложение Ајах. Описанная система существенно проще серверной структу- 
ры регистрации, подобной 1024] (Арасһе). В качестве упражнения читателю 
предлагается реализовать различные категории растрируемой информации, 
которые можно включать и отключать независимо. 

Рассмотрим теперь следующий тип инструментов — инспекторы ООМ. 


А4. Инспекторы РОМ 


В приложении Ајах пользовательский интерфейс часто модифицируется пу- 
тем программного изменения РОМ. Используя отладчик ЈауаЅсгірі-кода, мы 
можем пошагово пройти все этапы работы с РОМ. проверив, что они дают 
действительно то, что нам нужно. 

Тем не менее РОМ — это все же не то изображение, которое видит поль- 
зователь. Возможно, мы уверены, что код меняет РОМ так, как мы того 
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Рис. А.11. РОМ Іпѕресїог для браузеров Мо2Ша позволяет в режиме структуры исследовать 
ром МеБ-страницы, в частности, отображаются узлы, объявленные в НТМІ-коде и 
сгенерированные программно 


желаем, но это не оонзательни даст тот ииль,зиьа,телы;кии интерфейс, кото- 
рый мы ожидаем увидеть Чтобы помочь разработчику в изучении связей 
между деревом РОМ, с которым работает наш код, и интерфейсом, который 
видит пользователь, был создан класс инструментов, названных инспектора- 
ми РОМ. 

Инспекторы РОМ должны быть хорошо интегрированы в браузер, при- 
чем инспекторы конструируются только под конкретные браузеры. Наиболее 
популярными являются инструменты, созданные для браузера Мо7Ша Гіге- 
їох, поэтому вначале мы рассмотрим их. а затем альтернативы, доступные 
для браузера Іпѓегпеї ЕхріІогег. 


А.4.1. Использование РОМ Іпѕресіог для браузеров Мотіа 


Инструмент РОМ Шшзрес‘ог поставляется вместе с ЕшеЮх, но активизируется 
только при выборе соответствующей опции в процессе установки браузера. 
Если вы его установили, в меню Тоо![ѕ (Инструменты) появится опция РОМ 
Ірѕресіог. При первом запуске ООМ 1аѕресќог состоит из двух расположенных 
рядом панелей (рис. А.11)- Левая представляет собой древовидный элемент 
управления, вначале показывающий только документ и единственный узел 
НТМІ. Узел можно раскрыть, чтобы выявить заголовок и тело документа, 
а затем открыть в теле набор узлов, представляющих НТМГ-разметку стра- 
ницы, а также все элементы, созданные программными средствами. Если уз- 
лам был присвоен идентификатор или атрибут класса С$5$, соответствующая 
информация появится в дополнительных столбцах древовидного элемента. 

Данный древовидный элемент управления синхронизирован со страни- 
цей, отображаемой в основном окне браузера. Если выбрать узел дерева с по- 
мощью мыши, соответствующий элемент в разделе структуры страницы бу- 
дет выделен красной рамкой (данная связь является двусторонней). Вызывая 
команду Ѕеагсһ => Ѕе1есі Нете из меню СІіск РОМ Іпѕресіог, пользо- 
ватель может щелкнуть в окне УеБ-браузера и выделить элемент дерева, 
соответствующий отмеченному элементу. (То же можно сделать с помощью 
кнопки панели инструментов.) 

На правой панели информация о текущем узле указывается в одном из 
нескольких доступных форматов, включая формат отображения узлов РОМ, 
стилевых правил С55, а также объектов ЈауаЅсгірі (рис. А 12). В последнем 


Приложение А Инструменты для профессиональной работы с Ајах 593 


Рис. А.12. РОМ тзресюг (Мо7Ша) позволяет связывать с элементами РОМ 
сценарии Переменная { а го е ї определяетузел ОРОМ, выбранный в текущий 
момент; в данном случае это изображение планеты, границу которой мы хотим 
изменить 


режиме с объектом можно связать программный сценарий, щелкнув пра- 
вой кнопкой мыши на правой панели и выбрав кнопку Еуаша{е Лауазсг!ре. 
В качестве цели сценария ({агое{) можно указать выбранный в текущий мо- 
мент элемент РОМ, поэтому, например, чтобы окружить этот элемент тон- 
кой синей рамкой, можно ввести в поле команду ќагвеї .з1у[е. Бог4ег='4рх 
ѕоіа Бше’. 

РОМ ТІаѕресіог также содержит третью панель, расположенную ниже 
двух описанных. В данной панели можно визуализировать видимое содер- 
жимое документа (рис. А. 13). Данная панель появится, если пользователь 
наберет в поле КІ. адрес страницы и щелкнет на кнопке іпѕресі, после чего 
можно будет изучать расположенные рядом абстрактную РОМ и видимый 
документ. 


А.4.2. Инспекторы РОМ для браузера Іпіегпеї Ехр/огег 


Самой большой проблемой наборов инструментов для браузеров Мо7Ша яв- 
ляется то, что инспекторы РОМ не могут использоваться для выявления 
проблем в Іпѓегпеї Ехр]огег. Впрочем, существует несколько продуктов, пред- 
лагающих подобные возможности и для этого браузера. Многие из них яв- 
ляются коммерческими или условно бесплатными, хотя имеется и несколько 
рабочих бесплатных утилит, например ІЕросМоп (подробнее о ней речь пой- 
дет ниже — в разделе "Ресурсы". 

Подобно Мо2Ша РОМ ТШпзресфог, панель инструментов Е )осМоп предла- 
гает простое двухпанельное представление РОМ, с деревом слева и подроб- 
ным представлением узлов справа (рис. А.13). 

На этом мы завершаем обсуждение типов инструментов, используемых 
для разработки Ајах-проектов. Богатым поставщиком инструментов для ра- 
боты с Ајах является сообщество, сформировавшееся в среде разработчиков 
расширений для браузера Еігеѓох. В следующем разделе мы кратко опишем, 
как находить и устанавливать расширения РтеЮх. 





+ 


9 г ——. 


Ом» 2 


м нф ед ео ааа аа ае пану РА Рис. А.13. Панель инструментов 
н С» ре ІЕросМоп для Іпіегпеї Ехрогег 
а . | предлагает возможности, 
а н Г. | подобные РОМ Іпѕресїог (Егеох) 
18 кф | и позволяет быстро решать 
+ а 1! | вопросы визуализации 
Опе з с помощью программных 
0909 ет нне Горур: пользовательских интерфейсов 


14.3. Средство Ѕаїагі ООМ тзресюг для Мас О$ Х 


>раузер За для Мас ОЅ Х содержит встроенный инспектор РОМ, который 
ызывается через меню отладки. По умолчанию данное меню не активизи- 
'Овано. Чтобы активизировать его, запустите приложение Тегтіпа! и введи- 
е строку Яаеѓац1їѕ \угце сот.арріе.ЅаҒғагі ІпсіџӣеЮебивМепи 1. В зави- 
имости от ваших прав вам, возможно, придется использовать команду $190. 
Госле ее выполнения перезапустите браузер Зап, и меню отладки должно 
удет появиться. 


1.5. Установив расширений НгеТох 


1ы уже рассматривали два очень полезных расширения НигеЮх: отладчик 
^епктап и сетевой отладчик ГлуеНТТРНеадег$. Вообще, существует множе- 
гво расширений для ЕНитеюх. некоторые из которых предназначены для МеБ- 
азработчиков В данном разделе мы кратко рассмотрим процесс установки 
годуля Еігеѓох, используя в качестве примера расширение МоаНу Неадетз. 

Расширения Еігеѓох устанавливаются из самого браузера. Прежде все- 
о необходимо найти страницу загрузки расширения; в данном случае это 
1рѕ://аааопѕ .то7іПа.ого /ехіепѕіопѕ. На рис. А.14 показано, как со 
границы загрузки расширения МоаЙу Неайегѕ можно перейти на основную 
границу сайта Мо7Ша Ордае. 

В данном случае требуемая гиперссылка представляет собой большую 
нопку [и5{аП М№\. После щелчка откроется диалоговое окно с предупре- 
ждением об опасности установки неподписанных расширений (рис А.15). 


Рис. А.14. Все установленные 
расширения в браузере Еігеїох 
отображаются во всплывак 
диалоговом окне 





Рис. А.15. Расширения 
Агеох можно 
устанавливать из 
Интернета, используя 
специальный 
загружаемый архивный 
формат 





В отличие от обычного Јауа$сгірі-кода расширения имеют полный доступ 
к локальной файловой системе. Кроме того, следует сказать о подписывании 
расширений. Теоретически это должно защитить автора от подделок, однако 
на практике подписываются не все расширения. После установки расширение 
регистрируется во всплывающем диалоговом окне Ехїепѕіопѕ (рис. А.16). 

Нам осталось только закрыть все открытые окна Етеюх (включая ин- 
спекторы РОМ, отладчики и т.п.) и перезапустить Еігеѓох. Теперь расшире- 
ние готово к работе и отображается в меню Тоо! (рис. А.17). 

Браузер Егеѓох поддерживает множество расширений, многие из которых 
предназначены для УеБ-разработчиков. Не все расширения можно найти на 
сайте а44оп$.то7Ша.ог, но начинать поиск нужного инструмента стоит 
именно с этого сайта. Процедура установки расширения (в том числе рас- 
смотренного ранее отладчика Уепктап) обычно похожа на описанную выше. 
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Рис. А.16. Расширения появляются в диалоговом 
окне Ехїепѕіопѕ сразу после установки но 
активизируются только после перезапуска браузера 


звы а (0 лан) 
меры мм 
кае сее 1%) 
о 
| 2. р 


Рис. А.17. Расширение будет готово к использованию после 
перезапуска браузера 





1.6. Ресурсы 


Данная глава посвящена инструментам. Продукты, упоминавшиеся в ней, 
ожно найти на следующих М№еб-сайтах: 

• Техїраа (ууү.іехіраа.сот); 

. ЈЕаіє (муу. јеаії. оге); 

. ЕсИрзе (у\у\ум.есПрзе.ог=); 

• Модули ЈауаЅсгірі ЕсИрзе (һр: //јѕеаіїог. зоигсеГогее. пей /); 

. МіѕџаІ Зато Ехргеѕѕ (ВИр://1аЪ. тзАп. т1сгозо#.сот/ехргез$/); 
Югеатуеауег (\у\у\.тастоте 1а.сот/зоИ\аге/Агеат\еауег/); 

• Котойо (муу .асііуеѕѓаїе.сот/Ргойисі5/ Котойо/); 

Уепктап Пебизеег (ууу. тохіПа.огв/ргојесіѕ/уепктап/); 


Отладчик Місгоѕоћ Ѕсгірї (ммм. тісгоѕоѓї, сот/аӢомп1Іоааѕ/аеѓаі1 . аѕрх? 
Ғаті1,10=2#4 656е0-94ға-45 69-63с4-аағ9сса99 &аіѕрІауіапв=еп); 

• СһагІеѕ (\\\.хК72 .сот/сһаг1еѕ/); 

‚ Біаа!ег (муу. ааіегіоо1. сот); 

• уеНИрНеааегз (һр: / /Ііуеһіїрһеааегѕ. тох аеу.огр/); 


• Расширение Мойіѓу Неайетѕ (һіїрѕ:/ /ааӣопѕ, тохіПа.оге/ехіепѕіопѕ/ 
тогеіпѓо.рһр?1й=967 &уій=4243), 


Инспектор РОМ для Пцегпее ЕхрІогег ТІЕОосМоп (муу .сһелѓађог.сот/ 
ТЕросМоп/іпаех. Вт). А 
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К использованию языка ЈауаЅсгірі приходят различными путями. Одним 
адо реализовать дополнительные элементы графического интерфейса, дру- 
им — написать сложные программы. 

Данное приложение — не руководство по Лауабст ре; существуют многие 
орошие статьи и книги: которые помогут вам освоить данный язык. Мы 
ишь излагаем некоторые основные понятия, которые помогут специалистам, 
ладеющим Јауаи С#, в написании программ на ЈауаЅсгірі. (Сказанное отно- 
ится и к программистам, использующим С++. Однако необходимо заметить, 
то С++ унаследовал от С излишнюю гибкость, поэтому для специалистов, 
ривыкших к этому языку, переход к ЈауаЅсгірі будет менее болезненным.) 
Ісли вы принимали участие в промышленных проектах и полностью овладе- 
и приемами объектно-ориентированного программирования, то на первых 
гапах работы с Јауа$Ѕсгірі, находясь под влиянием Јауа или С#, вы будете 
корее бороться с языком, чем работать с ним. Мы испытали это на себе, 
оэтому считаем своим долгом помочь вам. 


С помощью Јауа$Ѕсгірі можно выполнять специфические действия, недо- 
гупные посредством Јауа и С#. В некоторых ситуациях особенности дан- 
ого языка позволят получить требуемые результаты более простым путем 
ли добиться большей производительности. В любом случае решение о том, 
тедует ли воспользоваться имеющимися возможностями, остается за вами. 
ели ранее вы имели дело с такими языками, как Јауа или С++, мы надеем- 
І, что данное приложение поможет вам, как несколько лет назад подобная 
^формация помогла некоторым из нас. 


11. Јауа5сгірі — это не уама 


акую нагрузку несет на себе имя? В случае Јауа и ЈауаЅсгірі оно направлено 
а обеспечение рыночного успеха и мало отражает суть. Язык ЈауаЅсгірі по- 
учил это имя буквально в последнюю минуту перед тем, как быть представ- 
знным широкой публике. Сотрудники отдела маркетинга компании М№еїѓѕсаре 
эедложили его вместо планировавшегося ранее имени Пуезсирт. Вопреки 
южившемуся мнению, Јауа$Ѕсгірі не принадлежит к семейству языков С. 
н больше похож на такие функциональные языки, как Ѕсһете и Зе его 
Ікже можно сравнить с языком Ру оп. Однако в имени ЈауаЅсгірі при- 
тствует слово Јауа, и синтаксические правила для этих языков в чем-то 
зхожи. В некоторых случаях Јауа$Ѕсгірі ведет себя подобно Јауа, а в других 
гучаях демонстрирует совершенно противоположное поведение. 

Эти различия позволяют использовать данные языки разными спосо- 
Іми. а в некоторых случаях дают возможность проделывать в ЈауаЅсгірі- 
юграммах такие головокружительные трюки, которым позавидует и умуд- 
^нный опытом сторонник [45р. 

Если вы опытный программист, то можете воспользоваться предостав- 
гемыми возможностями и получить блестящие результаты, написав лишь 
сколько сотен строк исходного текста. Если же вы только считаете себя 
[ытным, а на самом деле ваша квалификация далека от совершенства, вы 
*тстро "завязнете" в созданном вами коде. 
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Таблица Б.1. Основные различия между Јаха и Јауабсгірї 


Характеристика Описание 
Переменные не Переменные объявляются как переменные, а не как целые 
типизированы числа, строки или экземпляры определенных классов. 


В Чауа сир можно присваивать одной и той же переменной 
значения различных типов 


Код интерпретируется Код программы представляет собой исходный текст. В 

динамически процессе ее выполнения интерпретатор читает команды 
и выполняет соответствующие действия. Этим Јама$сгірі 
принципиально отличается от таких языков, как Јама, С и С#. 
Исходный код Ајах-приложения доступен пользователю. Более 
того, в процессе выполнения программы код может быть 
сгенерирован динамически, при этом нет необходимости 
прибегать к услугам компилятора 


Функции ЈамаЅсгірї В языке Јауа методы связаны с содержащими их объектами 

представляют собой и не существуют за их пределами. В Јама$сгірї функцию можно 

независимые элементы связать с объектом, но при этом ее можно вызвать в другом 
контексте или присоединить к другому объекту 


Объекты Јама$сгірї В Чама, С++ или С# типы объектов определяются посредством 
базируются на прототипах суперклассов, виртуальных суперклассов или интерфейсов. 
Тип определяет функциональные возможности объекта. 
В ЈауаЅсгірї объект по сути представляет собой ассоциативный 
массив. Для эмуляции в Јамабсгірї типов, подобных типам 
Чама, используются прототипы, но этим достигается лишь 
поверхностное сходство 


Весь наш предыдущий опыт подтверждает, что в работе следует стре- 
миться к простым решениям. Если вы входите в состав рабочей группы, то 
стандарты кодирования способствуют таким решениям (конечно, в том слу- 
чае, когда руководство не возражает против их использования). 

Представлять себе различия между языками необходимо также по следу- 
ющей причине: некоторые из особенностей реализуются браузером, поэтому, 
понимая происходящее, можно сэкономить много времени и усилий, отлажи- 
вая приложение. Зная различия между ЈауаЅсгірі и Лауа, становится понятно, 
что сходство между этими языками лишь кажущееся. 

Итак, читайте данное приложение и сами составьте представление о том, 
как в действительности выглядят объекты ЈауаЅсгірі, как они формируются 
и какие возможности предоставляют разработчику функции Јауа$Ѕсгірі. 


Б.2. Объекты в Јауабсгірі 


Создавая программу на ЈауаЅсгірі, не обязательно использовать объекты 
и даже функции. Можно написать программу в виде набора команд, кото- 
рые будут выполняться в процессе чтения их интерпретатором. Однако по 
мере усложнения программы обходиться без функций и объектов становится 
все труднее; не используя их, крайне сложно организовать должным образом 
СВОЙ КОД. 
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Создать объект ЈауаЅсгірі проще всего, вызвав встроенный конструктор 
класса Ођјесї. 


уак туорјесіё=пеу Орјесі (); 


В разделе Б.2.2 мы рассмотрим другие подходы и поговорим о том, что 
>значает ключевое слово пем. Первоначально объект туОбђјесї — "пустой", 
те. он не содержит свойств и методов. Добавить их несложно; рассмотрим, 
сак это можно сделать. 


5.2.1 Формирование объектов 


<ак было сказано ранее, объект ЈауаЅсгірі представляет собой ассоциатив- 
Тый массив, содержащий поля и имена. Ключевыми значениями для доступа 
1 элементам массива являются имена. Синтаксис, подобный С, является свое- 
)бразной "надстройкой" над внутренней реализацией объекта. Существуют 
г альтернативные средства доступа к свойствам и функциям. Сложный объ- 
*кг можно создавать шаг за шагом, добавляя по мере необходимости новые 
переменные и функции. 

Существуют два способа формирования объекта. Первый из них — это 
>бычное использование ЈауаЅсгірі. Второй способ предполагает применение 
пециальной системы обозначений, называемой ЗОМ. Начнем рассмотрение 
подхода, использующего средства Јауа$Ѕсгірі. 


Трименение выражений Јама$5сгірї 


Три выполнении фрагмента кода может возникнуть необходимость присво- 
[ть свойству объекта некоторое значение. Свойства объектов Јауа$сгірі до- 
текают чтение и запись, поэтому для присваивания значения можно исполь- 
овать обычный оператор =. Добавим свойство к созданному нами простому 
'бъекту. 


туОбјесі.ѕһое$іле=" 12"; 


В обычном объектном языке нам необходимо определить класс и объявить 
нем свойство $Ное$17е. в противном случае на этапе компиляции будет 

генерировано сообщение об ошибке. В ЈауаЅсгірі все обстоит по-другому. 
Лы можем ссылаться на свойства, используя выражения, предназначенные 
‚ля работы с массивом. В данном случае поступим так лишь для того, чтобы 
одчеркнуть внутреннюю реализацию объекта. 

туОбјесі['ѕһое81іле'|="12"; 

Такая запись плохо подходит для повседневного использования, одна- 
о в некоторых случаях она может обеспечить определенные преимущества. 
> частности, работая с объектом как с массивом, мы можем реализовать 
тражение на этапе выполнения программы. Подробнее этот вопрос мы рас- 
мотрим в разделе Б.2.4. 

Мы также можем динамически добавить новую функцию к объекту. 


туОбјесі.ѕреакҮоцгЅһоеЅіле=Ғипсііоп(){ 
аІегі{"ѕһое $12е : "+1һіѕ.5һоеЅіле); 
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Кроме того, существует возможность использовать в своих целях уже 
существующую функцию. 


Ғопсёіоп зауНе11о() { 
а1егі ('Һе11о, ту ѕһоеЅіле 1$ '-Ё-іѕ. ѕһоебіле); 


Пур] есь. зауНе11о=зауНе11о; 


Заметьте, что, связывая с объектом определенную ранее функцию, мы не 
ставим круглые скобки. Если мы выполним присваивание так, как показа- 
но ниже, то выполним функцию зауНеПо() и присвоим свойству туОбјесі 
значение, возвращаемое ею, в данном случае — па. 


пуОБ) есь. зауНе11о=зауНе11о(); 


Для того чтобы создать сложную модель данных, можно присваивать 
объекты другим объектам. 


уаг пу11іркагу=пеу Орјесі (); 

пу1 і ргагу .Боокз=пем АггауЕ); 

ту1іргагу . роокѕ [0] =пем Орјесё (); 
пу11ргагу . роокѕіо] .Е161е="Таки1р Си1ёіуасіоп &Бкоцав (Бе Адеѕ"; 
пу11ргагу . роокѕ [0] .аоёћогѕ=пехм Аггау () ; 

уаг јію=пем Орјесіо; 

јім.пате= "Јіт Вхомт"; 

јім.аде=9; 

пу 1ргагу . роокѕ [0] .аоџёћокѕ [0] =5јіт; 





Такая рутинная работа быстро утомляет программиста. К счастью, 
в Јауа$Ѕсгірі предусмотрена система записи, которая называется ЈЅОМ и поз- 
воляет быстро формировать графы объектов. Рассмотрим ее более подробно. 


Использование Ј50М 
ТауаЗсирЕ Објесі Моѓайоп (7ТЗОМ) — одно из базовых средств данного языка, 
позволяющее быстро создавать массивы и графы объектов. Для того что- 
бы лучше понять ЈЅОМ, нам надо разобраться в работе массивов ЛауаЗсире, 
поэтому рассмотрим данный вопрос подробнее. 

В ЈауаЅсгірі предусмотрен встроенный класс Аггау. Его экземпляр можно 
создать с помощью ключевого слова пеж. 

тубгагу.боокѕ=пем Аггау(); 


При присвоении значений на элементы массива можно ссылаться с помо- 
шью числовых индексов, как в языках С или Јауа. 

пуІ1ргагу .роок$ [4] =ѕотмеРгейеЁіпеадвоок; 

Элемент массива можно связать с ключевым значением, как в Јауа Мар- 
Руёћоп Рісіопагу и. конечно же, в любом объекте ЈауаЅсгірї. 

пу11ргагу . роокѕ [ "Веѕеѕе11ег" ] =зомергедеЕ1пеаВоок; 

Для некоторых задач такой синтаксис вполне подходит, но создание 


подобным способом объектов или массивов значительного объема требует 
неоправданно больших затрат времени. Для массивов с числовыми индекса- 
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ми существует сокращенная запись: в квадратных скобках указывается спи- 
сок значений, разделенных запятыми. 
ту 10бгагу.боокѕ= [ргедейпеаВоокі,ргейейпейВоок2,ргейаећйпейаВоок3] ; 


При формировании объекта ЈауаЅсгірі мы используем фигурные скобки; 
каждый элемент массива записывается как пара ключ:значение. 
туГл1Фгагу.БооК$= { 
БеззеПег : ргедейпеаВооК|, 


соокроок : ргедейпедВоок2, 
ѕрасеЕіШег : ргейейпейВоокзЗ 


7 
При любой записи лишние пробелы игнорируются, что позволяет вырав- 
нивать идентификаторы так, чтобы упростить восприятие программы. Клю- 
чевое значение может содержать пробелы. В этом случае, согласно правилам 
ЈЅОМ, оно помещается в кавычки. Например: 


"Везё ЅеПег" : ргеаейпеаВоокі, 


ЈЅОМ-записи допускают вложенность. Это позволяет создавать сложные 
иерархии объектов (ограничением в данном случае является лишь макси- 
мально допустимая длина строки). 


уаг ту11ргагу= { п" 
1осаёіоп : "ту Һоџѕе", 
Кеуиогаѕ : [ "гоо уедеёар1іеѕ", "іёокпір", "‘ёедіцџм" ], 
роокѕ: [ 
{ 
С1Е1е : "Тогпір Со1ёіуаёіоп ЕҺгоџдһ һе Адез", 
аоёһогѕ : [ 


{ паме: "Ом Вгоут", аде: 9 }, 
{ пате: "”Ріск Тогпір", аде: 312 } 





һ 
рор1ісаёіопраёе : "1опа адо" 
Ь 
{ 
С1Е1е : "Тогпір Си1ёіуаёіоп Еһгоџдһ (Бе Адеѕ, уо1. 2", 
аоёһћогѕ : [ 


{ паме: "Јіт Вкоүт", аде: 35 } 


1; 
руб Иса 1опае : пем Юаѓе(1605,11,05) 


} 
] 

); 

В данном случае для объекта шу Ьгагу заданы три свойства: Іосаїіоп 
представляет собой обычную строку; Кеу\ог4$ — это список строк с числовы- 
ми индексами; боокѕ — список объектов также с числовыми индексами. При 
этом каждый объект, содержащийся в боокКѕ, содержит заголовок (строку), 
дату публикации (в одном случае это ЈауаЅсгірі-объект Ба, а в другом — 
строка) и список авторов (массив). Каждый автор представлен параметра- 
ми пате и азе. ЈЅОМ№ предоставляет механизм для формирования требуемой 
информации за один проход. В других случаях для этого потребовалось бы 
несколько строк кода (и большая пропускная способность). 

Внимательные читатели, вероятно, заметили, что для второй книги мы 
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задаем дату публикации с помощью ЈауаЅсгірі-объекта Рае. При присвоении 
значения можно использовать любой код ЈауаЅсгірі, даже определенную нами 
функцию. 
Ғопсііоп гипро\4егР1о{(){ 
геќигп пем Оа{е(1605,11,05); 


уаг уоПМит=2; 
уаг ёогпіруо12= { 


с161е : "Тигпір Си1ёіуаёіоп ЕБхоцар (Бе Адеѕ, уо1. " +уо1Мит, 
ачеВогз : | 
{ паме: "Јітм Вхомо", аде: 35 } 

[а 

рчр1ісаёіопраёе : допроиаегрР1ої () 


} 
І 


}; 

Здесь название книги вычисляется динамически с помощью включенного 
выражения, а свойству рибісаіоп Оаѓе присваивается значение, возвраща- 
емое функцией. 

В предыдущем примере мы определили функцию гипро\дегР1о\ (), ко- 
торая выполнялась при создании объекта. Мы также можем определить 
функцию-член для объекта, создаваемого средствами ЈЅОМ, так, чтобы она 
выполнялась при непосредственном обращении. 

уаг їџгпірү012={ 

сіе : "Тагир СиШуаНоп #һгоцеһ {Бе Ареѕ, уо|. "+уоПМат, 
а ог$ : | 
{ рате: "Лт Вго\п", аве: 35 } 
рчр1ісаёіопраёе : допроиегрР1ої () 
} 
177 
ѕиппагітяе: Ёопсёіоп (1еп) ( 
1Е (!1еп) { 1еп=7; } 
уаг ѕиюттпагу=Еһіѕ.біё1е+" ру " +Еһіѕ.аціһогѕ [0] . папе 
+" апа һіѕ сгопіеѕ іѕ уегу Бог1та. 7"; 
Ғог (уар і=0;і<1еп;і++) { 
ѕоппагу+= "2"; 
} 


а1егі (зипмаку); 


} 
}; 


тогпірУо12.ѕиттагіхе{6); 


Функция ѕиттагіте*) обладает всеми характеристиками стандартной 
функции Јауа$сгірі; для нее определены параметры и объект контекста, иден- 
тифицируемый с помощью ключевого слова їһіѕ. Созданный объект ничем 
не отличается от любого другого ЈауаЅсгірі-объекта, поэтому по мере необ- 
ходимости мы можем использовать для его формирования и запись ЈЅОМ, 
и обычные выражения Јауа$сгірі. В частности, средствами ЈауаЅсгірі можно 
изменить объект, созданный с использованием ЈЅОМ. 
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уаг питбегѕ={ опе:1, {\0:2, {Бгее: 3 


пи бегз. Нуе=5; 


Мы сначала определили объект, применив запись ЈЅОМ, а затем доба- 
зили к нему свойство, используя обычное выражение ЈауаЅсгірі. Точно так 
же мы можем расширить посредством ЗОМ объект, созданный с помощью 
выражений Јауа$Ѕсгірі. 

уар соокроок=пем Орјесі (); 


соокроок.радеСоопі=321; 
соокроок .аоіћог= { 


Е1хзЕМаше: "Наггу", 

ѕесопамаме: "Сһгізѕзітаѕ", 
р1гспаасе: пем Рае (1900,2,29), 
1псекезЕз: ["сБеезе" , "иһіѕЕ11па", 


"Һіѕёогу оЁ 1ідһЕҺоџѕе Кеер1та"] 

; 

Используя только встроенные ЈауаЅсгірі-классы Ођјесї и Аггау и сред- 
ства ОМ, можно сформировать сколь угодно сложную иерархию объектов. 
ЈауаЅсгірі также предоставляет средства, позволяющие выполнять действия, 
тодобные определению классов. Рассмотрим их и выясним, чем они могут 
томочь в работе над приложениями. 


5.2.2. Функции-конструкторы, классы и прототипы 


3 объектно-ориентированном программировании при создании объекта обыч- 
ю указывается класс, экземпляром которого он является. И в Јама, 
і в ЈауаЅсгірі присутствует ключевое слово пем, позволяющее создавать объ- 
‹кты требуемых типов. Этим данные языки похожи друг на друга. 

В языке Јауа нет ничего, кроме объектов (исключением являются простые 
"ипы), причем каждый объект является потомком класса јаха .Іапе.Објесї. 
Тоддержка классов, полей и методов реализована в виртуальной машине 
1ауа. Когда мы записываем приведенное ниже выражение, то сначала задаем 
^ип переменной, а затем создаем экземпляр класса, используя конструктор. 


МуОесЕ туОбј=пем МУуОбјесі{аге1,аге2); 


Данное выражение корректно только в том случае, если определен класс 
ІуОЫјесі и в нем предусмотрен соответствующий конструктор. 

В ЈауаЅсгірі также используются объекты и классы, но понятие насле- 
дования в этом языке отсутствует. Каждый объект Јауа$сгірі — это экземп- 
1яр одного и того же базового класса, который позволяет формировать поля 
1 функции в процессе выполнения программы. Пример определения свойства 
фи веден ниже. 


МуЈауаѕсгіріОрј есі . сотр1еёбе1умемРгорегіу= " зомеЕ1па"; 
Для организации .объектов в таких условиях могут быть использованы 
[рототипы, с помощью которых объявляются свойства и функции. Эти свой- 


тва и функции автоматически присоединяются к объекту при его создании. 
Ложно написать объектную программу на ЈауаЅсгірі, и не применяя прото- 
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типов, однако прототипы позволяют упорядочить код и привести его в соот- 
ветствие с объектным подходом. Вряд ли нужно доказывать, что объектный 
подход стоит применять при работе над сложным приложением, в составе 
которого реализуется богатый клиент. 

Мы можем написать на ЈауаЅсгірі нечто, напоминающее Јауа-определение. 


уаг шуОб=пем МуОбјесї(); 
Однако вместо класса МуОес возможно определить лишь функцию 
с таким именем. Ниже приведен пример простого конструктора. 


Ғопсбоп МуОбјесі(пате,ѕіле){ 

161$. пате=паіпе; 
ЄҺіѕ.ѕіле=ѕіхле; 

} 

Вызвать ее можно следующим образом: 

уаг пуОБ)]=пем МуОрјесі ("ёіаа1еѕ", "7.5 шебегз"); 

аїіегё ("ѕіле оЁ "+пуорј.патме+" 1$ "+туОЬ) .512е); 

Все свойства 1015, установленные в конструкторе, впоследствии доступ- 
ны как свойства объекта. При необходимости можно включить в состав кон- 
структора и вызов а1егї (), в результате їіаа1Іеѕ будет сообщать свой размер. 
Часто в составе конструкторов встречаются определения функций. 

Ғопсёіоп МуОрјесё { паме, ѕіхе) { 

еһіѕ.патме=пате; 
ЄҺіѕ.ѕіле=ѕіхле; 
еҺіѕ.бе115іле=Ёџпсёіоп () { 
а1егі ("ѕіле оЕ "+һіѕ.пате+" 1$ "+0һіѕ.ѕіле); 


} 


} 
уаг туОбј=пем Објесї("{іаа1еѕ", "7.5 теѓегѕ"); 


туОбј.(е1185ілеї); 

Такое решение допустимо, но оно далеко от идеала по двум причинам. 
Во-первых, при формировании каждого экземпляра МуОбјесі создается но- 
вая функция. Мы, как и все грамотные программисты, следим за использова- 
нием памяти, и если нам надо много таких объектов, то данный подход ста- 
новится для нас неприемлемым. Во-вторых, мы непредумышленно создали 
то, что принято называть замыканием (с1озиге). В данном случае оно вполне 
безобидно, но как только мы включим в конструктор выражения, работаю- 
щие с узлами РОМ, оно может стать причиной серьезных проблем. С замы- 
каниями вы ознакомитесь далее в этом приложении. А сейчас рассмотрим 
альтернативный подход, основанный на использовании прототипов. 

Прототип — это свойство Јауа$сгірі-объектов, аналогов которому в обыч- 
ных объектных языках нет. С прототипом конструктора связываются функ- 
ции и свойства. После этого прототип и ключевое слово пеу начинают рабо- 
тать совместно, и при вызове функции посредством пеу к объекту присоеди- 
няются все свойства и метода прототипа. Это звучит несколько непривычно, 
но использовать прототип на практике достаточно просто. 

Ғопсбіоп МуОбјес пате, ѕіхе){ 


1ћіѕ.пате=пате; 
{01$.517е=517е; 
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> 
МуОрјесі .ргоіоіуре.іе115іле= Еџпсііоп () { 
а1іегё ("ѕіле оЁ "+ЕҺіѕ.паме+" іѕ "+6615$.6127е); 


уаг пуОрј=пем МуОрјесі { "+іаа1еѕ", "7.5 тмеёбегѕ"); 

пуОоюј .ёе115іхе(); 

Сначала мы объявляем конструктор, а затем добавляем функции к про- 
отипу. Функции присоединяются к объекту при его создании. Посредством 
:лючевого слова їһіѕ в процессе выполнения программы можно ссылаться 
га экземпляр объекта. 

Обратите внимание на порядок действий. Обращаться к прототипу мы 
южем только после того, как функция конструктора уже объявлена. Объек- 
ы же могут наследовать от прототипа только те свойства и методы, которые 
же были добавлены к нему на момент вызова конструктора. Между вызо- 
ами конструктора допустимо изменять прототип. Добавлять к прототипу 
южно не только функции, но и другие элементы. 

МуОрЮ Ј] есё .ргоёоёуре.со1ог= "геа"; 

уаг орј1=пем МуОрјесі (); 

МуОбјесі.ргоїоѓуре. со1ог="Б1ие"; 

МуОБ]ес(. ргоїоѓіуре.ѕоипа Е есі = "броОО0Ооіпе!!"; 

уаг оБј2=пем Му0Објесї{); 

В данном примере для об] 1 задается красный цвет, а звуковые эффекты 
тсутствуют. Для об ј 2 цвет уже синий и, кроме того, с ни связан доволь- 
:0 неприятный звук. Изменять прототип во время работы программы вряд 
и имеет смысл. Необходимо знать, что подобное возможно, но в своих про- 
раммах лучше применять прототипы для того, чтобы приблизить поведение 
ауа$сгірі-объектов к обычным классам. 

Заметьте, что прототипы встроенных классов, т.е. классов реализуемых 
раузером и доступных посредством ЈауаЅсгірі, также можно расширять 
встроенные классы принято также называть рабочими обњектами (һоѕї 
бјесі)). Рассмотрим, как можно сделать это на практике. 


к2.3. Расширение встроенных классов 


Разработчики ЈауаЅсгірі планировали, что сценарии на данном языке будут 
ыполняться под управлением программ, предоставляющих доступ к соб- 
гвенным объектам, написанным, например, на С+ + или Јауа. Эти объекты 
азывают встроенными или рабочими. Они несколько отличаются от объек- 
ов, определяемых разработчиками, которые мы рассматривали выше. Одна- 
о механизм прототипов дает возможность работать и со встроенными клас- 
ами. Браузер Іһѓегпеї Ехр]огег не позволяет расширять ОМ -узлы; другие 
<е основные классы доступны для расширения во всех основных браузерах, 
'ассмотрим в качестве примера класс Аггау и определим несколько вспомо- 
ательных функций. 
Атгау.ргоѓоѓуре.іпаехОѓ=Ғопсіоп(оБј){ 
уаг гези(=-1; 
Гог (уаг 1=0;1<1һіѕ.Іепеїһ;і++){ 
Ш (51$ ==06]){ 
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геѕи1ё=1; 
ргеак; 
} 
} 


геёигп гезо1е; 

} 

Мы определили для объекта Аггау дополнительную функцию, которая 
возвращает ЧИСЛОВОЙ индекс объекта в данном массиве или значение -1, если 
этот объект отсутствует. Далее мы можем написать метод, проверяющий, 
содержит ли массив указанный объект. 


Атгау.ргоѓоѓуре.сопіаіпѕ=Ёѓипсіоп{обј){ 
геќогп (161$.шдехОКоб])>=0); 
} 


Ниже приведен пример функции, включающей в массив новые элементы, 
предварительно убедившись в том, что данный элемент отсутствует. 
Атгау.ргоѓоїуре.аррепа=ѓипсііоп(обј, поаир){ 
і (!(по4ир && #һ15.сопѓаіпѕ(оЫј)))ғ 
{61$ [1615$.1е126]=06}; 
} 
} 


После того как новые функции определены, они будут присутствовать 
в каждом новом объекте Атгау, независимо от того, применялся ли для его 
создания оператор пем или выражение ОМ. 

уаг питбегѕ=[1,2,3,4,5]; 

уаг 5018=питбетгѕ.сопіаіпѕ(8); 

питбегѕ.аррепа("сһееѕе", гие); 

Как и для объектов, определяемых разработчиком, прототипы встроен- 
ных функций можно изменять в процессе работы программы, в результате 
объекты, созданные в разное время, будут иметь различные наборы функций 
и свойств. Несмотря на наличие подобной возможности, мы рекомендуем мо- 
дифицировать прототип только один раз в начале выполнения программы. 
Поступая так, вы избежите недоразумений; в особенности это важно в том 
случае, если в написании программы берет участие рабочая группа. 

Прототипы могут оказаться очень полезными при разработке модели для 
клиентской части Ајах-приложения. Не исключено, что в этом случае потре- 
буется не только определить объекты различных типов, но и использовать 
наследование. В отличие от С++, Лауа и С#, язык ЈауаЅсгірі непосредствен- 
но не обеспечивает наследование, но его можно реализовать посредством про- 
тотипов. Рассмотрим этот вопрос подробнее. 


Б.2.4. Наследование прототипов 


Объектный подход предполагает не только определение классов, но и под- 
держку иерархии наследования. В качестве классического примера часто 
приводят объект Ѕһаре, в котором определены методы для вычисления пе- 
риметра и площади геометрической фигуры. На его основе формируются 
конкретные реализации для прямоугольников, треугольников и кругов. 


608 Часть У. Приложения 


С наследованием тесно связано понятие области видимости. Область ви- 
димости метода или свойства определяет, кто может пользоваться ими. Обыч- 
но в языках программирования предусмотрены области видимости рибііс, 
ргіуаїе и ргоѓесїеа. 

Область видимости и наследование удобно применять при реализации мо- 
дели предметной области. К сожалению, базовые средства ЈауаЅсгірї не обес- 
печивают их поддержку. Несмотря на это, разработчики пытаются реализо- 
вать элегантные решения имеющимися в наличии средствами, и эти попытки 
часто приводят к успеху. 

Дуг Крокфорд (ссылка на его работу приведена в конце данного приложе- 
ния) предложил оригинальное решение, позволяющее имитировать в объек- 
тах ЈауаЅсгірё и наследование, и область видимости. Его работа заслуживает 
внимания, но, к сожалению, мы не имеем возможности обсуждать ее здесь. 
Для того чтобы воспользоваться результатами работы Крокфорда, необходи- 
мо потратить достаточно длительное время на их изучение, поэтому если вы 
ие собираетесь пользоваться данной технологией постоянно, а проект надо 
выполнить в сжатые сроки, тратить время на знакомство с ней не следует. 
В аналогичном положении оказываются те разработчики, которые решают, 
стоит ли им применять Јауа-библиотеку 51ги{5 или Тареѕігу. Подобные сред- 
ства надо либо использовать постоянно, либо не пользоваться ими вовсе. Те, 
кого заинтересовал данный вопрос, могут найти дополнительную информа- 
цию на \е-узле Крокфорда. 


В объектном программировании наблюдается постепенный переход от на- 
следования к композиции. В этом случае сложные функции реализуются 
в составе вспомогательных классов, которыми могут воспользоваться любые 
объекты. Во многих случаях композиция не уступает наследованию, причем 
ТауазсирЕ обеспечивает ее поддержку. 

Продолжая обсуждение объектов ЈауаЅсгірі, необходимо обратить внима- 
ние на отражение. 


Б.2.5. Отражение в Јауабсгірі-объектах 


Обычно при написании кода программист представляет себе структуру объ- 
екта, с которым он собирается работать. Однако в некоторых случаях прихо- 
дится использовать незнакомые объекты. Перед тем как выполнять с такими 
объектами какие-либо действия, надо получить сведения о их свойствах и ме- 
тодах. Например, при написании системы отладки или средств протоколиро- 
вания необходимо обеспечить поддержку произвольных объектов, поставля- 
емых извне. Процесс получения сведений о структуре объекта называется 
отражением. Он знаком программистам, использующим Јауа и .МЕТ. 

Если нам надо выяснить, существует ли в составе Јауа$сгірі-объекта неко- 
торое свойство или метод, мы можем выполнить несложную проверку. 


1Е (Муорјесё .ѕотеРгорегіу) { 
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Однако, если Му0Објесі.ѕотерРгорегіу содержит логическое значение 
Га15е, или число 0, или специальное значение па, тело оператора Ш не 
будет выполнено. Более строгая проверка выглядит следующим образом: 


Ш Сурео(МуОест.зотеРгорему) != "апдейпеа"){ 


Если нас интересует тип свойства, мы можем использовать оператор іп - 
ѕќапсеоѓ, который позволяет определить основные встроенные типы, 
Ш (туОЫј іпѕѓіапсеоїѓ Аггау){ 


}е1зе 1Е (пуо) 1озбапсеоЕ Орјесі) { 


} 
Он также дает возможность распознавать классы, которые мы определи- 
ли посредством конструкторов. 


Ш (туОЫ іпѕќапсеоғ МуОбЫјесі){ 
} 


Если вы хотите использовать іпѕќапсеоЁ для проверки своих классов, вам 
необходимо учитывать некоторые особенности. Во-первых, любой объект, со- 
зданный посредством ЈЅОМ, — это либо Објесї, либо Аггау. Во-вторых, меж- 
ду встроенными объектами могут существовать отношения "родительский- 
дочерний". Например, Еопсіопр и Аггау являются потомками Објесі, поэто- 
му порядок проверки на соответствие тому или иному типу имеет значение. 
Предположим, что мы написали следующий фрагмент кода и передали функ- 
ции объект Аггау: 

Ғопсёїіоп беѕіТуре (муОЪ)) { 

1Е {пуОБ) іпѕёапсеоЁ Агккау) { 
а1егі{"і'ѕ ап аггау"); 

}е1зе 1Е {пуОБ] іпѕёапсеоЁ Орјесі) { 
а1егі ("іі'ѕ ап орјесё"); 

} 

} 

сеѕіТуре ([1,2,3,47); 

В результате мы получим сообщение о том, что объект имеет тип Аггау. 
Эта информация вполне корректна. Внесем небольшие изменения в тот же 
код. 

Ғопсііоп 1еТуре(туО]){ 

Ш (туОЫј іпѕќапсеоѓ Објесі){ 
а1ег( ("1{'5 ап објесі"); 

}е15е Ш (туОЫј іпѕіапсеоѓ Аггау){ 
аІегі("1('5 ап аггау"); 


1ев:ТуреС.2,3,4)): 

Теперь при тех же условиях мы получим ответ, что объект имеет тип 
ОБес{. Эта информация также формально правильна. 

Бывают случаи, когда необходимо выявить все свойства и функции объ- 
екта. Сделать это мы можем с помощью простого цикла Гог. 
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Ғопсііоп МуОбјесі(){ 
(615. со[ог='геа'; 
(61$. Науог-'з1гамбеггу' ; 
{615$.а721ти11='45 аевгееѕ'; 
(013. Ғауогіѓіе Оов» 'со111е'; 


уаг ту0Ыј=пеж МуОБ]есЕО; 

уаг аебив =" 41зсоуег!и я... \п"; 

Рог (уаг і іп туОЪ]){ 
аебив+=і+" -> "+туОЫј[і]+"\а"; 


УРИИНЯ 

В данном случае тело цикла выполняется четыре раза, предоставляя все 
значения, заданные в конструкторе. Такой подход применим и для встроен- 
ных объектов, однако для узла ООМ размер окна с сообщением оказывает- 
ся слишком большим. Более профессиональный способ подобной проверки 
рассматривался в главах 5 и 6 при создании пользовательского интерфейса 
ОбјесіМіемег. 

В объектно-ориентированных языках существует еще одна возможность, 
которую нам необходимо обсудить, — виртуальные классы или интерфейсы. 


В.2.6. Интерфейсы и виртуальные типы 


При разработке программ часто возникают ситуации, когда необходимо опи- 
сать поведение некоторого элемента, не реализуя его. Выше в данном при- 
ложении мы рассматривали объект Ѕһаре, подклассами которого являются 
прямоугольники, круги и т.д. В этом случае мы можем точно сказать, что 
никогда не сможем получить абстрактную геометрическую фигуру саму по 
себе в отрыве от ее конкретной реализации. В объекте Ѕһаре определены об- 
щие абстрактные свойства всех геометрических фигур. В реальном мире не 
существует аналогов подобных объектов. 

Виртуальные классы С++ и интерфейсы Јауа предоставляют разработ- 
чикам средства описания подобных данных в программе. Термин "интер- 
фейс" мы часто используем для описания взаимодействия различных ком- 
понентов программного обеспечения. Чтобы обеспечить подобное взаимодей- 
ствие, автор библиотеки для работы с геометрическими фигурами не дол- 
жен принимать во внимание конкретные реализации этих фигур. С другой 
стороны, программист, реализующий интерфейс Ѕһаре, не должен учиты- 
вать особенности библиотечного кода или существующие реализации данно- 
го интерфейса. 

Интерфейсы обеспечивают разделение понятий, кроме того, они широ- 
ко используются в описании образов разработки. Применять их желательно 
и при написании Ајах-приложений. Однако в ЈауаЅсгірі понятие интерфейса 
отсутствует, поэтому нам необходимо найти ему замену. 

Проще всего неформально определить взаимодействие и считать, что раз- 
работчики каждого объекта знают, как поддерживать его. Дейв Томас (Рауе 
Тһотаѕ) назвал данный подход фиктивными типами (4асКк їуріпе): если 
нечто описано как тип, следовательно, оно и является типом. Возвращаясь 


Приложение Б. Инструменты для профессиональной работы с Ајах 611 


к нашему примеру интерфейса Ѕһаре, можно сказать, что если для некоторо- 
го элемента можно вычислить периметр и площадь, то этот элемент является 
геометрической фигурой. 

Предположим, что нам надо сложить площади двух геометрических фи- 
гур. Используя язык Тауа, мы можем написать следующий метод: 


роьіс доче ад4Агеаз{ЗВаре 51, Ѕһаре $2){ 
геиги 51.2е1Агеа()+52.се1Агеа(); 
} 


Заголовок метода запрещает передавать ему что-либо кроме геометриче- 
ской фигуры, поэтому, занимаясь реализацией тела метода, мы знаем, что 
учитываются соглашения о взаимодействии. В ЈауаЅсгірі параметры метода 
могут иметь любой тип, поэтому нельзя говорить об автоматическом выпол- 
нении соглашений. 


Ғопсііоп ааадАгеаѕ(1,52) { 
геїшгп і.веѓАгеа() +52.оеѓАгеа{); 

} 

Если в объекте, переданном в качестве параметра, отсутствует функция 
2е1Агеа (), интерпретатор ЈауаЅсгірі сгенерирует сообщение об ошибке. Пе- 
ред вызовом функции можно проверить, присутствует ли она. 

Ғопсііоп ҺһаѕАгеа(оЫј){ 

геїигп об] && обј.веіАтеа && обБј.веіАгеа іпѕїапсеоѓ ЕипсНоп; 
} 


Код нашей функции необходимо модифицировать с учетом данной про- 
верки. 


Ғопсіоп ааадАгеаѕ(ѕ1,52){ 
уаг іоѓа1=п0и11; 
і? (БазАгеа($1) && һаѕАгеа(52))! 
10(а1-51.веѓАтгеа() +52.реѓАгеа(); 


} 


геіџгп іоіаі; 

} 

Используя отражение ЈауаЅсгірі, мы можем написать универсальную 
функцию, проверяющую, имеется ли в составе объекта функция с конкрет- 
ным именем. 

Ғопсііоп ітрІетепіѕ(обј,ЁопсМате){ 

геїигп об] && об ВшсМаше| && обРЮпс Маше] іпѕѓќапсео# Еоипсіоп; 

} 

Мы можем также присоединить эту функцию к прототипу класса Ођјесї. 

ОБ) есе.ргкобобуре . 1пр1ешепЕ ==ЕайсЕ тол { ЕопсМапе) { 

гесогп 61$ && (01$ [ЕоосМаме] && 61$ [ЕапсМаше] 1пзбапсеоЕ РопсЕ1оп, 

} 

Это позволяет организовать проверку функции по имени. 

Ғопсёіоп ҺаѕАгеа (орј) { 








гесогп ор) .1тр1емепе$ ("деЕАгеа"); 
Можно даже проверить соответствие параметра интерфейсу. 
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Ғоипсііоп 1$5Варе(оЪ]){ 
геіигп обј.ітріетепіѕ("веїАгеа") &«& обј.ітріетепіѕ ("ае Регітеѓег"); 

} 

Данный подход обеспечивает определенную степень надежности, однако 
не такую, как в программах на Јауа. Нам может встретиться объект, в ко- 
тором имеется функция е{АгеаО, возвращающая, например, вместо чис- 
лового значения строку. Тип значения, возвращаемого ЈауаЅсгірі-функцией, 
неизвестен до тех пор, пока мы не вызовем ее. (Мы можем написать, напри- 
мер, функцию, которая будет возвращать в рабочие дни числовое значение, 
а в выходные — строку символов.) Создать набор функций для проверки 
возвращаемых значений достаточно просто. Пример функции из подобного 
набора приведен ниже. 


Ғопсііоп іѕМотм (ага) { 
геёџгп рагѕеҒ1оаё (ага) ! =Мам; 
} 
где ММ — сокращение от "пої а питбег" ("не число"). Это специальная пе- 
ременная ЈауаЅсгіріё, предназначенная для обработки ошибок числовых фор- 
матов. Приведенная выше функция возвращает значение {гие для строки, 
начинающейся с цифр. Функции рагзе |1оа О и рагѕе!піО пытаются из- 
влечь числовое значение из переданного им параметра. Однако выражение 
рагѕеЕ1оаї("64 Пестагез") вернет значение 64, а не МаМ. 
Продолжим работу над функцией ааадгеазѕ {). 
Ғопсііоп ааадАгеаѕ(1,52){ 
уаг ѓоѓа1=п011; 
і (һаѕАгеа(51) && ҺаѕАгеа(52)){ 


уаг а1=51.веіАгеа#); уаг а2=52.реѓАгеа(); 
Е {15Мот(а]) && 15 Мит (а2)){ќоѓаі=рагѕеЕіоаі(аІ) +рагѕеЕ1оаї(а2); 
} 


гефагпи їоѓа1; 

В данном случае для обоих параметров вызывается функция рагзе- 
ЕІоаї (). Это сделано для того, чтобы обеспечить по возможности обработку 
любых строк, которые могут быть случайно переданы функции. Если $1 со- 
держит значение 32, а $2 — значение 64 Һесіагеѕ, то функция аа4Агеаз () 
вернет число 96. Если бы функция рагѕеЕ1оаї () не использовалась, то воз- 
вращаемым значением была бы строка 3264 Һесїагеѕ! 

Подводя итоги, можно сказать следующее: использовать фиктивные ти- 
пы достаточно просто, но при этом приходится полностью доверять другим 
участникам рабочей группы и надеяться, что они корректно реализуют все 
детали кода. Такое доверие оправдано в том случае, если численность рабочей 
группы мала. При работе над большим проектом, когда, группа разделяется 
на подгруппы, доверие неизбежно ослабевает. Ели вы захотите реализовать 
проверки "поверх" фиктивных типов, информация, приведенная в этом раз- 
Деле, поможет вам осуществить задуманное. 

Мы обсудили язык Јауа$сгірї с точки зрения объектов. Теперь перейдем 
на уровень функций и рассмотрим их особенности. 
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Б.З. Методы и функции __ 


В предыдущем разделе, как и в большинстве глав данной книги, мы опре- 
деляли функции и вызывали их. Программисты, имеющие опыт работы на 
Јауа или С#, могут посчитать, что функции ЈауаЅсгірі — это нечто вроде 
знакомых им методов, отличающиеся правилами записи. В этом разделе мы 
уделим функциям больше внимания и покажем, каких результатов можно 
добиться с их помощью. 


Б.3.1. Функции как независимые элементы 


Функции похожи на Јауа-методы тем, что для них определены параметры 
и возвращаемое значение. В тоже время между функциями Јауа$Ѕсгірї и Лауа- 
методами есть существенные различия. Јауа-метод связан с классом, в ко- 
тором он определен, и не может существовать вне этого класса. Функция 
Јауа$сгірі — это независимый элемент, функционирующий по собственным 
правилам. (Статические Лауа-методы занимают промежуточное положение — 
они принадлежат лишь классу и не связаны ни с одним его экземпляром.) 

Программисты, использовавшие языки семейства С, скажут, что функции 
Јауа$сгірі — это то же самое, что указатели на функции в С++. Они будут 
правы, но не совсем. 

В ЈауаЅсгірі ЕипсИоп — это встроенный объект. Конечно же, он содержит 
исполняемый код и допускает вызов, но он также является потомком ОБесё 
и может делать то же, что и любой объект Јауа$Ѕсгірі, в том числе и хра- 
нить значения свойств. К объекту ЕипсИоп можно присоединить в качестве 
методов другие объекты ЕипсИоп (многие разработчики поступают так). 

Вы уже знаете, как получить ссылку на объект ЕипсНоп. Чаще всего 
требуется одновременно и сослаться на функцию, и вызвать ее. 

уаг 

геѕои1+=МуОрјесі .аобомеев1та (х,у, я) 

Однако Еопсііоп — это также независимый объект, и к нему можно об- 
ратиться с помощью метода са11() (а также метода арріу (), предоставляю- 
щего аналогичные возможности). 

уаг геѕші= МУОЫЈ есі.аоЅотеїіћіпе.саі({ МуОћегОбјесї, х, у, <) 

Допустимо даже следующее выражение: 

уаг геѕи11= МуОЫјесі['аоЅоте(ћіпв'|.са1( МуОгћегОбјесі, х,у, х) 

Первый параметр метода Еоипсііоп.са1{) — это объект, выполняющий 
роль контекста функции при ее вызове. Последующие параметры рассматри- 
ваются как аргументы самой функции. Метод арріу () действует несколь- 
ко по-другому, в частности, второй параметр представляет собой массив 
аргументов, передаваемых функции. Такой подход обеспечивает несколько 
большую гибкость. 

Следует заметить, что число параметров функции ЈауаЅсгірі не фиксиро- 
вано. В Јауа или С# при попытке вызывать метод, указав количество пара- 
метров больше или меньше объявленного, на этапе компиляции генерируется 
сообщение об ошибке. ЈауаЅсгірі лишь игнорирует лишние параметры и при- 
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зваивает недостающим значение ипдейЯпеа. Искусно реализованные функции 
чогут даже запрашивать список параметров посредством свойства агхитеп($ 
л присваивать недостающим параметрам осмысленные значения по умолча- 
нию. Они также могут генерировать исключения и предпринимать другие 
черы по обеспечению работоспособности программы. Например, можно реа- 
чизовать в рамках одной функции 26{- и $&-метод. 

Ғопсёіоп агеа (уа14е) { 


1Е (уа1ае) { 
ЕҺіѕ.акеа=уаіпе; 


} 
гебсоги іһіѕ.агеа; 

} 

Если мы вызовем агеа{) без параметров, значение уае будет не опре- 
делено, присвоение не будет иметь смысла и функция выступит в роли 26{- 
летода. Указав параметр, можно превратить функцию в ѕеі-метод. Данный 
годход широко использовал Майк Фостер в своей библиотеке х (см. ссылку в 
сонце данного приложения и главу 3). Если вы поработаете с библиотекой х, 
данный подход вскоре станет привычен вам. 

Тот факт, что функции могут быть независимыми от конкретных объек- 
юв, открывает ряд интересных возможностей. 


5.3.2. Присоединение функций к объектам 


Тоскольку Лауазсийр{ — функциональный язык, он позволяет определять 
функции в отсутствии объектов, например: 


ГапсНоп аоЅботеїћіпе(х,у,2){ ... } 
Тело функции также можно определить непосредственно при вызове. 


уаг аоЅотеїһіпе=ѓипсііоп(х,у,2){ ... } 


Чтобы отдать должное объектному подходу, разработчики ЈауаЅсгірї 
[редусмотрели возможность присоединения функций к объектам. При этом 
|ни становятся похожими на методы Јауа или С#. Связать функцию с объ- 
ктом можно несколькими способами. 

Можно присоединить существующую функцию к существующему объек- 
У (в этом случае вызвать функцию может только сам объект, но не другой, 
врожденный с использованием того же прототипа). 

пуОоЮј . даоботеёһіпоћеуи=аобЅомеёһіпд; 

пуорј .доЅотеёһіпдћеу (х,у, х); 

Мы также можем присоединить функцию таким образом, что к ней бу- 
‚ет иметь доступ любой экземпляр класса. Для этого надо добавить функ- 
‚ию (либо предопределенную, либо объявленную в процессе присоединения) 

конструкторе (см. раздел Б.2.2) или связать ее с помощью прототипа. 

Несмотря на возможность присоединения функции к объекту, связь меж- 
у ними нельзя считать очень прочной. 
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Б.3.3. Заимствование функций из других объектов 


Способность функций выступать в роли независимых элементов существенно 
влияет на возможности языка. Очень важно представлять себе это влияние 
при программировании обработчиков событий, связанных с элементами внут- 
реннего интерфейса; именно этим часто приходится заниматься программи- 
стам, разрабатывающим Ајах-приложения. 

В чем же состоят эти новые возможности? Каждый объект может заим- 
ствовать функцию другого объекта и вызывать ее. Определим класс, описы- 
вающий некоторое дерево. 

Ғопсіоп Тгее(пате, Іеаї, БагК){ 

1015. пате=пате; 

{01$.1еаЁ=|еаЁ; 

{01$.БагкК=Ьагк; 
} 


Свяжем с этим классом функцию, предоставляющую описание дерева. 


Тгее.ргоїоѓуре.ӣеѕсгіре=ѓипсііоп(){ 
геїигп #һіѕ.пате+": Іеаѓ="+һіѕ.Іеағ+", Багк="+(һіѕ.багк; 

} 

Если мы создадим экземпляр объекта Тгее и запросим у него описание, 
то получим вполне предсказуемый результат. 

уаг Веесһ=пеу Тгее("огееп, зеггайе еже" ,"зтоо"); 

а1ег{{ Веесһ.аеѕсгібе()); 

В окне отображается текст Веесһ: 1еаЁ=егееп, ѕеггаіеа есе, Багк=- 
ѕтооіһћ. Пока никаких неожиданностей не предвидится. Теперь определим 
класс, представляющий собаку. 

Ғопсёіоп Рос (паме, рагк) { 

(615$ .папе=паме; 
еҺіѕ.рагк=рагк; 

} 

Создадим экземпляр класса рор. 


ин 


Ш и"). 
уаг Эпо\му=пем ШОоз("зпому","\аи! \аи!”); 


Объект мог бы продемонстрировать описание звуков, издаваемых собакой 
(к тому же мы определили их), однако функция, с помощью которой мож- 
но было бы сделать это, отсутствует. Тем не менее можно воспользоваться 
функцией класса Тгее. 

уаг іпрЕоџпс=Веесһ.ӣеѕсгіре; 

СпирРопс.са11 (Ѕпоку) ; 

Как вы помните, первый параметр, передаваемый Ёипсііоп.са11(), 
это объект контекста, на который ссылается специальная переменная 111$. 
Приведенный выше фрагмент кода генерирует окно с сообщением, в кото- 
ром отображается текст Ѕпому: [еаЁ=ипдейпеа, Багк=маџ! \аи!. Формат 
сообщения нельзя назвать идеальным, но все же это лучше, чем ничего. 

Но как это происходит? Почему собака получает возможность вызвать 
функцию, которая на самом деле принадлежит дереву? Ответ несколько 
неожиданный: на самом деле функция не принадлежит дереву. При при- 


516 Часть У. Приложения 


оединении функции к прототипу Тгее связывание осуществляется лишь 
гастолько, насколько это необходимо для поддержки выражений типа 
ІуТгее.аӢеѕсгібе (). Если рассмотреть внутреннюю реализацию программы, 
•о можно увидеть, что функция хранится как фрагмент текста и выполня- 
тся при каждом вызове. При этом конкретное значение {11$ изменяется от 
„бращения к обращению. 

Заимствование функций — интересный прием; освоив, вы можете приме- 
нять его при написания своего кода. Однако для повышения надежности мы 
се же рекомендуем реализовать для Ѕпому собственный метод Багк(). Мы 
бсуждаем данный вопрос лишь потому что при написании кода для под- 
держки событий, вам необходимо знать, какие действия браузер выполняет 
ез вашего участия. 


13.4. Обработка событий в Ајах-программах 
и контексты функций 


)бработчики событий в Ајах-приложениях похожи на обработчики, реализу- 
мые инструментальными средствами создания пользовательских интерфей- 
ов для многих языков. Как было показано в главе 4, события, связанные с 
[ышью и клавиатурой, выделяются в отдельные категории. В рассмотренном 
ами примере использовался обработчик опсіісКк; это событие генерируется 
о щелчку мышью на видимом элементе. Подробное обсуждение обработки 
обытий в ОНТМІ не входит в круг задач, рассматриваемых в данной книге; 
[ы ограничимся лишь одной особенностью, которая может стать ловушкой 
ля неопытных программистов. Обработчик события может определяться в 
[ТМІ-дескрипторе, например: 

<аіу іа=тауріу орс1іск= 'аІегі:аіегі(һіѕ.іа) 'х/аіу> 

Его также можно задать из программы. 


Ғопсіоп сііскНапаі1ег(){ а1Іегі(#һіѕ.іа); } 
туріу.опсііск=сіскНапаїег; 


Заметьте, что во втором случае мы передаем ссылку на объект Еипс- 
іоп (после сискКНап ег круглые скобки не указываются). При объявлении 
>ункции в НТМГ-дескрипторе создается безымянная функция. Эта запись 
<вивалентна приведенной ниже. 

туріу.опсііск=ѓипсііоп!){ а1ег((161$.14); } 


Заметьте, что в обоих случаях параметры функции не предусмотрены: 
е существует способа задать их при щелчке мышью. Если же мы щелка- 
Е на элементе РОМ, при вызове функции передается в качестве параметра 
5ъект Еуеп, а сам элемент выполняет роль объекта контекста. Зная это, 
ожно избежать многих неприятностей, в особенности при написании объ- 
стного кода. Источником проблем может стать тот факт, что узел РОМ 
-егда используется в качестве контекста, даже если функция присоединена 
^средством прототипа к другому объекту. 

В приведенном ниже примере мы определяем простой объект с обработ- 
аком события для видимого интерфейсного элемента. В данном случае объ- 
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ект можно рассматривать как модель, обработчик события выполняет роль 
контроллера, а элемент РОМ является представлением. 

а НИ 

һіѕ.аіу=а1у; 

єһіѕ.аіу.опс1іск=ёҺізѕ.с1іскНапа1ег; 

} 

Конструктору передается идентификатор и элемент РОМ, с которым свя- 
зывается обработчик события. Сам обработчик определен следующим обра- 
зом: 

туОбј.ргоѓоѓуре.сісКкНапаіег=ѓипсііоп(еуепі) { 

аіегі(һіѕ.1д); 

Таким образом, щелкнув мышью на интерфейсном элементе, мы должны 
увидеть идентификатор объекта, не так ли? На самом деле этого не произой- 
дет, так как функция шуОб .сИсКНап ет () заимствуется браузером (точно 
так же, как в предыдущем разделе собака заимствовала метод дерева), в 
результате чего она выполняется в контексте элемента, а не объекта моде- 
ли. Поскольку элемент имеет встроенный идентификатор, это значение бу- 
дет отображено и, в зависимости от соглашений об именовании, может даже 
совпасть с идентификатором объекта модели. В результате у разработчика 
сформируется ложное представление о происходящем. 

Если мы хотим, чтобы обработчик события ссылался на объект модели, 
мы должны передать ссылку несколько по-иному. Существуют два способа 
решения этой задачи. Один из них, на наш взгляд, наверняка предпочти- 
тельнее другого, по крайней мере, он давно доказал свою работоспособность. 
Однако одна из задач данной книги — давать имена различным программ- 
ным решениям, поэтому мы рассмотрим оба способа. 


Ссылка на модель по имени 


Согласно описываемому подходу, каждому экземпляру объекта модели ста- 
вится в соответствие уникальный идентификатор и поддерживается глобаль- 
ный массив объектов. Имея ссылку на элемент РОМ, мы можем обратиться 
к объекту модели, используя в качестве ключа для поиска в массиве часть 
идентификатора. Данный подход иллюстрируется на рис. Б.1. 

Необходимость генерации уникального идентификатора для каждого эле- 
мента, несомненно, следует отнести к накладным расходам, однако эта задача 
может быть выполнена автоматически. Частью ключа может стать, напри- 
мер, длина массива или, при генерации кода на У\еБ-сервере, ключ для базы 
данных. , 

В качестве примера рассмотрим объект типа шуОб, который содержит 
строку заголовка, реагирующую на щелчок мышью путем вызова функции 
туОбј.Ғоо{). 

Ниже представлен глобальный массив. 

уаг МуОрјесёѕ=пеу Агкау(); 


Функция конструктора, регистрирующая объект модели в этом массиве, 
выглядит следующим образом: 


Объект модели 







Элемент ООМ 
3. Получение ссылки 
на модель 
2. Поиск по фрагменту 
идентификатора 
1. Разбор {15.0 и извлечение 
Глобальный поиск фрагмента идентификатора 
Обработчик 
события 


Рис. Б.18. Ссылка на модель из обработчика события по имени. 
Производится разбор идентификатора, и результаты разбора 


используются в качестве ключевого значения для поиска в глобальном 
массиве 


Ғџпсёіоп муорј (19) { 
Еһіѕ.џіа=іа; 
МуОрјесёѕ [6ћ1іѕ.џіај] =6һізѕ; 


ЕҺіѕ.гепаег (); 


} ^5 
Ниже приведен метод объекта туОб. Мы вызываем его щелчком на стро- 
! заголовка. 


пуОоЮЈ .ркобобсуре. #00= Ғипсііоп () { 
аїегі (' Ғоооо!Мм ‘+Еһіз.џіа); 


} 


Метод геп4ег() объекта создает узлы РОМ. 
туОбј.ргоѓоїуре.гепаег-Ғипсііоп(){ 





Еһіѕ. роду=досигаепі . сгеаёсеЕ1етепі ("аіу") ; « 
еҺіѕ.роду.іа=Еһіѕ.оіа+"_ роду"; 
еҺіѕ.біб1еВаг=досотмепі . сгеаёбеЕ1етмепі ("Яіу") ; 
еҺіѕ.біб1еВаг.іа=ёһҺіѕ.ціа+"_ёіё1еВаг"; 
еҺіѕ.біб1еВаг.опс1іск= ҒооЕуепЕНапа1ег; 











} 


Если мы создаем в представлении ООМ-узлы для модели, то связываем 
ними идентификаторы, содержащие идентификаторы модели. 
Заметьте, что ссылка на функцию Г ооЕуеп Нап ег () присваивается 
юйству опс1іск элемента РОМ, соответствующего строке-заголовка. 
Еопсе1оп ЕооЕуепЕНапоа1ех (еуепі) { 
уаг поде10)=чеЕМуоЪ) (ёһҺіѕ.іа); 
1Е (поде100ј) { мойе10рј.#Ёоо(); } }} 





Объект модели 







Элемент РОМ 


2. Обращение к 
1115.тодеюы 


1. Обращение к 15 


Обработчик 
события 


Рис. Б.19. Присоединение ссылки на модель 
непосредственно к узлу РОМ упрощает поиск 
модели функцией обработки события 





Чтобы вызвать метод Ёоо (), функция обработчика события должна най- 
ти экземпляр туоб ј. Для этой цели мы создаем специальный метод. 

Ғопсбоп веёМуОЫј(1а)! 

уаг Кеу-14.5рИЕ(® _")[0]; 
гаги МуОбјесіѕ кеу]; 

} 

Этот метод использует свойство іа рОМ-узла для того, чтобы извлечь 
ключ, с помощью которого можно получить объект модели из глобального 
массива. 

Метод ссылки на модель по имени хорошо зарекомендовал себя на прак- 
тике, однако существует более простой путь решения той же задачи, при кото- 
ром нет необходимости снабжать узлы РОМ длинными идентификаторами. 
(Трудно сказать, хорош этот способ или нет. С одной стороны, он приводит к 
излишнему использованию памяти, а с другой стороны — упрощает отладку 
в Мо7Ша РОМ Тпзрестог.) 


Присоединение модели к узлу ООМ 


Согласно второму подходу к обработке событий РОМ, все необходимые дей- 
ствия выполняются посредством ссылки на объекты, а дополнительные стро- 
ки и поиск в глобальном массиве не требуются. Именно этот подход в основ- 
ном используется в данной книге (рис. Б.2). 

Данный подход существенно упрощает обработку события. Функция кон- 
структора для объекта модели не выполняет специальных действий с иден- 
тификатором, а метод Г оо () определяется так же, как и ранее. Создавая 
узлы РОМ, мы используем особенность ЈауаЅсгірі, позволяющую присоеди- 
нять к любому объекту произвольные атрибуты, и связываем объект модели 
непосредственно с узлом, получающим событие. 


пуОрј .ргоёсоёуре.сгеаёеуіет= Ёопсііоп () { 








еҺіѕ. роду=аосотепё . сгеаёеЕ1епепі ("іу"); 
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еһ1ѕ. роду .поае10)=Е515; 








$61$.6161еВаг=Чосомепе . сгеаёеЕ1етмепі ("Яіу"); 
ЕҺіѕ.іі1еВаг.тоде10рј=һіѕ; 
Еріѕ.іЄ1еВаг.опс1іск= ҒооЕуепёНапа1ег; 





} 
При написании обработчика события мы можем непосредственно полу- 
чить ссылку на модель. 





Ғопсёіоп ЁооЕуепЕНапа1ег (еуепі) { 
уах поде10рј =ЕһҺ1іѕ.тойе100ј; 
1Е (тоде10рј) { тойе10)ј.Ёоо(); } 


} 

При этом не нужно специально выполнять поиск. 

Необходимо, однако, учитывать одну важную особенность. При исполь- 
зовании данного подхода создается циклическая ссылка между ООМ-узлом 
и переменной, не имеющей отношения к РОМ. В некоторых браузерах это 
может вызвать проблемы в работе системы "сборки мусора". Если корректно 
реализовать данное решение, можно избежать неоправданного расходования 
памяти, но мы настоятельно рекомендуем вам изучить главу 7, перед тем как 
выполнять связывание модели с ПОМ -узлом. 

Понимая, как функции ЈауаЅсгірі определяют свой контекст, можно ре- 
ализовывать элегантные обработчики событий, пригодные для повторного 
использования. Возможность переключаться между контекстами может по- 
началу приводить к недоразумениям, но если хорошо освоить данный меха- 
низм, то им очень удобно пользоваться в работе. 

Последняя особенность функций ЈауаЅсгірі, которую нам необходимо рас- 
смотреть, — это способность создавать замыкания. В языках Јауа и С# поня- 
тие замыкания отсутствует, однако в некоторых языках сценариев, например 
Отооуу и Воо, оно используется. С замыканиями также приходится сталки- 
ваться в языке С# 2.0. Рассмотрим, что такое замыкания и как их исполь- 
зовать. 


5.3.5. Замыкания в Јауабсгірі 


Сам по себе объект Еипсііоп — неполный, и чтобы вызвать функцию, нам на- 
до передать ей объект контекста и набор параметров (этот набор может быть 
пустым). Замыкание можно рассматривать как объект Еипсііоп, связанный 
со всеми ресурсами, необходимыми для выполнения функции. 

В ЈауаЅсгірі замыкания создаются неявно. Не существует конструктора, 
вызываемого с помощью выражения пеу С1озигеО, и нет возможности по- 
лучить ссылку на объект замыкания. Для создания замыкания достаточно 
объявить функцию в блоке кода (например, в теле другой функции) и обес- 
печить доступ к ней из-за пределов блока. 

Вышесказанное может показаться несколько непривычным, поэтому сто- 
ит рассмотреть простой пример. Предположим, что мы определили объект, 
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представляющий робота, и фиксируем показания системного таймера, соот- 
ветствующие времени создания конкретного робота. Для этой цели мы можем 
написать конструктор, подобный приведенному ниже. 
Ғопсйоп Кобо} 
уаг сгемеТипе=пем Раїе(); 
{015.21 Азе=Р@исЧоп\{){ 
уаг пом=пем ПаЁе(); 
уаг авре=пом-сгеаѓеТіте; 
геіигп аве; 


} 


(Все роботы идентичны, поэтому мы не передаем конструктору в каче- 
стве параметра имя или какие-либо другие сведения.) Конечно, предпочти- 
тельнее бьуто бы оформить сгеаїеТіте в виде свойства так, как показано 
ниже, однако мы намеренно объявили локальную переменную, область види- 
мости которой ограничивается блоком, где она определена (в данном случае 
конструктором). 


(15$ .сгеасеТт1тме=пем раїіе{) ; 





Следующей строкой конструктора является определение функции реѓАре ( 
Заметьте, что мы определили внутреннюю функцию в составе другой функ- 
ции и что внутренняя функция использует локальную переменную сгеа{е- 
Тите, принадлежащую области видимости внешней функции. Поступив та- 
ким образом, мы создали замыкание. Если мы определим робота и запросим 
его возраст, то получим значение в пределах 10-50 миллисекунд — интервал 
между первым выполнением сценария и загрузкой страницы. 

уаг горріе=пеит Коро (); 

міпаоу. опіоаа= Ёџпсёіоп () { 

а1егі (горріе.деёАде()); 
} 
Несмотря на то что мы объявили сгеайеТите как локальную переменную 
для функции конструктора, процедура "сборки мусора" не затрагивает ее до 
тех пор, пока переменная гоБЪ1е ссылается на объект Кобоѓ. Таким образом, 
произошло связывание посредством замыкания. 
Замыкание присутствует, только если внутренняя функция создана в со- 
ставе внешней. Предположим, что мы реструктуризировали код и вынесли 
функцию веїАғе () за пределы конструктора так, что ее могут совместно 
использовать все экземпляры класса КоБо\. 
Ғопсііоп Короё () { 
уаг сгеасеТ1те=пем рабе (); 
ЕҺ15ѕ.сдеіАде=гороАде; 

} 

Ғопсёїіоп короАде{) { 
уаг пои=пем раёе{); 
уаг аде=пом-сгеакеТ1ме; 
гесогп аде; 

}; 

В этом случае замыкание не будет создано и мы получим сообщение о том, 
что переменная сгеаѓіеТіте не определена. 
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Создать замыкание очень легко, и, к сожалению это можно сделать 
епреднамеренно. В результате локальные переменные будут связаны и про- 
‚едура "сборки мусора" не затронет их. Если под действие случайно создан- 
ого замыкания попадут узлы РОМ, это приведет к значительному расходо- 
анию памяти. 

Чаще всего замыкания создаются при связывании функций обратного 
ызова, представляющих собой обработчики событий, с источниками этих 
обытий. Как было сказано в разделе Б.3.4, контекст и набор параметров, 
оторые получает функция обратного вызова, не всегда устраивают разра- 
отчика. Мы рассмотрели способ создания для элемента РОМ дополнитель- 
ой ссылки на объект модели. В результате модель становится доступной 
осредством РОМ -элемента. Замыкания обеспечивают альтернативный спо- 
об решения данной задачи. 


пуОр ј .ргобобуре.сгеаёеуіеум= Ёипсёіоп () { 





ећ1іѕ.Еіб1еВаг=досигоепі . сгеаёеЕ1етмепі ("Яіу" }; 

уаг подӣе10рј=Еһ1зѕ; 

ећіѕ.ііё1еВаг.опс1іск= Ёопсіёіоп () { 
ҒооЕуепіНапа1ег.са11 (поде10рј); 








} 


В определенном нами анонимном обработчике формируется ссылка на 
окальную переменную тойдеЁУ. В результате создается ссылка и доступ 
тодеІОЫј становится возможным в процессе выполнения функции. Заметь- 
е, что замыкания создаются только для локальных переменных; ссылка по- 
редством 1115$ не приводит к возникновению подобного эффекта. 

Мы использовали данный подход в главе 2 при создании объекта 
ощеп(Г.оа4ег. Функция обратного вызова опгеайуѕіаѓесһапве, предостав- 
яемая браузером Пиегпе{ Ехр]огег, возвращает в качестве контекста объект 
шао\. Поскольку міпаоу определен глобально, мы не знаем, для какого 
бъекта Сощмеп оааег изменилось свойство геадуз{ае. Чтобы решить эту 
адачу, мы передаем ссылку на соответствующий объект посредством замы- 
ания. 

Мы настоятельно рекомендуем программистам, работающим над Ајах- 
риложениями, по возможности избегать замыканий и принимать альтер- 
ативные решения. Если вы будете использовать прототип для добавления 
эункций к объекту, то избежите дублирования функций и не создадите замы- 
ания. Перепишем наш класс Кобої в соответствии с данной рекомендацией. 


Ғопсйоп Кобо} 
(1$ .сгеабеТт1гае=пеи Бабе{); 





} 

Коро .ргоёбоёуре.деёАде=Ёџпсііоп () { 
уаг пом=пем раёбе (); 
уаг аде=пои-Еһіѕ.сгеаёеТіте; 
геигп аде; 


Функция веіАвеО определяется только один раз, и, поскольку она свя- 
ана с прототипом, каждый созданный объект Кобо! имеет доступ к ней. 
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Замыкания находят свое применение, но мы не будем подробно рассмат- 
ривать данный вопрос. Если вас заинтересовала эта тема и вы хотите изучить 
замыкания более подробно, вам следует прочитать статью Джима Лей (Лт 
Геу), ссылка на которую приведена в конце данного приложения. 


Б.4. Выводы 


В данном приложении мы рассмотрим ряд интересных особенностей языка 
Јауа$стгірі. При этом мы преследовали две цели. Во-первых, хотели проде- 
монстрировать выразительные средства данного языка. Во-вторых, намере- 
вались рассказать о некоторых решениях, часто принимаемых неопытными 
программистами и способных привести к возникновению проблем. Специа- 
лист, овладевший объектным мышлением, сразу назовет подобные решения 
неоптимальными и даже опасными. 


Мы рассмотрели вопросы поддержки объектов в Јауа$Ѕсгірі и сходство 
между классами ОБес{ и Аггау, а также обсудили различные способы со- 
здания экземпляров объектов Јауа$Ѕсгірі: использование ]ЗОМ, функций кон- 
структоров и прототипов. Кроме того, вы узнали, как обеспечить в Јауа$Ѕсгірі 
такие средства объектно-ориентированных языков, как наследование и ин- 
терфейсы. Чтобы сделать это, приходится не следовать принципам языка, 
а скорее противодействовать им. 


Говоря о ЈауаЅсгірі-объекте Еипсйоп, мы показали, что возможно суще- 
ствование функций независимо от объектов, с которыми они связаны. Более 
того, объекты даже могут заимствовать функции другу друга. Зная эту осо- 
бенность, можно лучше понять модель событий ЈауаЅсгірі. И наконец, мы 
рассмотрели замыкания и показали, как общепринятые программные реше- 
ния могут привести к непреднамеренному созданию замыкания, что в конеч- 
ном итоге чревато неоправданным расходом памяти. 


По сравнению с Јауа или С#, язык ЈауаЅсгірі обеспечивает гораздо 
большую степень гибкости и простор для применения различных стилей про- 
граммирования. Подобная свобода, предоставляемая программисту, хороша 
лишь тогда, когда он знает, что должен сделать. Тем не менее при работе 
группы разработчиков особенности ЈауаЅсгірі могут привести к возникнове- 
нию проблем. Чтобы избежать их, надо придерживаться соглашений о коди- 
ровании. 


Если вы хорошо представляете себе работу средств Јауа$сгірї, то исполь- 
зование данного языка доставит вам немало приятных минут. Тем, кто до 
использования Ајах применял объектные языки, эта глава поможет побыст- 
рее включиться в работу и избежать ряда ошибок. 


Б.5. Ресурсы 


Книг, посвященных самому языку Јауа$Ѕсгірї, а не программированию в среде 
У\еБ-браузера, сравнительно немного. Книга Дэвида Фланагана (аула Еапа- 
вап) Лауа5стр: Тһе Бейийе Сиійе (О'КеШу, 2001) — безусловно, очень 
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серьезная работа. Она несколько устарела, но скоро должно выйти новое 
издание. Более новая книга Николаса Закаса (М№ісһоІаѕ ХаКаз) Ргојеѕѕіопа! 
Јауа$сгірі юг Иер Реуеіореғѕ (тох, 2004) представляет собой хороший об- 
зор возможностей языка, в том числе средств, появившихся недавно. Еще 
одной хорошей книгой является Полный справочник по Лауа$стру, 2-е изда- 
ние. Томас Пауэлл, Фриц Шнайдер. 

Полезные материалы можно найти в Мер. Дуг Крокфорд (Юоџе Сгоск- 
та) обсуждает вопросы применения объектного подхода при программиро- 
вании на ЈауаЅсгірі, в частности, создание закрытых свойств и методов для 
классов (һр: //уу№.сгосКкҒога.сот/јауаѕсгірі/ргіуаѓе.һіёті) и реализа- 
цию наследования (һр: //ууү.сгоскѓога.сот /јауаѕсгірі/ргіуаѓе.һіті1). 
На узле Питера- Пола Коха (Реѓег-Раш Косһ) по адресу ВИр://аииКзто4е. 
огд также рассматриваются многие особенности языка. 

Материал Джима Лея (Лт Іеу) о замыканиях в ЈауаЅсгірі можно найти 
в документе һр: //јібБегіпе.сот/Ѓад/Ёад поѓеѕ/сІоѕигеѕ. Һіті. 

Библиотеках Майка Фостера расположена на сервере Вр: //м\м\. сгоѕѕ- 
Бго\зег .сот. 
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В последнее время библиотеки Ајах и ЈауаЅсгірі прошли большой путь от 
небольших интерфейсных утилит до полномасштабных клиентских и сервер- 
ных решений. В данном приложении мы попытаемся охватить весь диапазон 
предлагаемых продуктов и заранее просим прощения у тех компаний, чью 
продукцию мы не упомянули. 

Авторы данной книги протестировали не все библиотеки и наборы инстру- 
ментов; во многих случаях описание основано на информации от автора или 
поставщика. Если вы читаете данный текст через год после его публикации, 
многие описания будут неточными или устаревшими, а сами продукты — 
заброшены или включены в другие проекты. По нашему мнению, текущее 
состояние отрасли очень нестабильно, поэтому мы считаем, что через двена- 
дцать месяцев выживет только несколько наиболее удачных библиотек. 

Ну все, хватит отступлений! Ниже приводится обзор библиотек Ајах, которые 
могут вам встретиться. Они приводятся в алфавитном порядке; кроме того, 
мы попытались разбить их по категориям. Удачного кодирования! 


Ассеѕѕкеу Опаегііпіпо МЬгагу 
Продукт с открытым исходным кодом 
мүүүу.Бегу.пеї/ѕоћуаге/аш/ 


Добавляет подчеркивание ключей доступа без использования дескрипторов 
<и>. Соответствующие дескрипторы подчеркивания в РОМ создаются с по- 
мощью атрибута ассеѕѕкеу и Јауа$Ѕсгірї. 


Аст меМЛа деїѕ 
Коммерческий продукт; имеется бесплатная версия 
ум/\.асИуе\1е{5.сот 


Элементы управления богатых клиентов ЈауаЅсгірі; в настоящее время ос- 
новной продукт предлагает полномасштабную поддержку действий с сеткой. 


Ајах Јамабегмег Расез Егатемогк 


Продукт с открытым исходным кодом (Арасйе) 
ћёр://ѕтігпоу. оге ,ги/еп/ајах-јѕҒ. Һіті 

Предназначена для введения в любое существующее приложение ЈауаЅегуег 
Ғасеѕ инфраструктуры Ајах. Большинство существующих компонентов мож- 
но использовать без изменений или после простого преобразования в формат 
с поддержкой Ајах. Предлагает внедрение продукта в проект МуЕасез. От- 
личия от спецификаций ЈЅЕ минимальны. 


Ајах ЈЅР Тад Шргагу 


Продукт с открытым исходным кодом 
ћіёр://ајахіавѕ.ѕоигсеѓогве.пеї/ 

Представляет собой набор дескрипторов ЈЅР, упрощающих использование 
технологии Аѕупсһгопоџиѕ ЈауаЅсгірі апа ХМГ (Ајах) на платформе ЈауаЅегуег 
Рареѕ. Данная библиотека дескрипторов облегчает разработку за счет того, 
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что разработчикам Ј2ЕЕ не приходится писать необходимый Лауабспир(-код 
для реализации МеБ-формы с поддержкой Ајах. 

Функция Ашюосотшр|ее извлекает список значений, согласующихся со стро- 
кой, введенной в текстовую форму, по мере ввода этой строки пользовате- 
лем. Функция СаПоп( отображает выносной или всплывающий блок, при- 
вязанный к элементу НТМГ, с помощью события опсИсКк. Функция Ѕе1есї 
заполняет значениями поле второго списка, основываясь на значении, вы- 
бранном из первого списка. Функция То5]е переключает значение скрытого 
поля формы между {тие и ѓа[5е, в то же время переключаясь между дву- 
мя изображениями. Дескриптор ирдайе Е1е14 обновляет одно или несколько 
значений поля формы, основываясь на отклике, порожденном вводом текста 
в другое поле. 


Ајах.МЕТ 


Майкл Шварц (Місһае! 5сйжаг:), 2005 
Статус продукта не оговаривается, использование бесплатное 
ћір://меЫоғ25.аѕр.пеі/тѕсһуагх/ 


Библиотека, допускающая различные варианты доступа ЈауаЅсгірі-кода к 
серверному приложению .МЕТ. Может передавать вызовы от Јауа$Ѕсгірі к ме- 
тодам .МЕТ и возвращаться к обратным вызовам ЈауаЅсгірі. Может обра- 
щаться к информации о сеансе из ЈауаЅсгірі-кода. Кэширует результаты. 
Не требует изменения исходного кода серверной части сценария. Значениям, 
возвращаемым клиентскому ЈауаЅсгірі-коду, предлагается полная поддержка 
классов (в том числе классов ОайаТа]е, раѓаЅеї, раѓаМіеу, Аггауѕ и Со|- 
Іесііопѕ). 


АјахАС 
Продукт с открытым исходным кодом (Арасйе 2.0) 
БЕр://а]ах.7тегуааз.сот.аи 


Инкапсулирует целое приложение в один класс РНР, содержащий помимо ко- 
да приложения дополнительные библиотеки ЈауаЅсгірі (если они требуются). 
Вызов файла РНР (НТМГ-страницы) довольно прост. Вы создаете класс при- 
ложения, затем ссылаетесь на ЈауаЅсгірі-код приложения и присоединяете 
к приложению все необходимые НТМГ-элементы. Вызывающий НТМГ-код 
не засоряется ЈауаЅсгірі-кодом, все события присоединяются динамически. 
АјахАС легко интегрировать с процессором шаблонов и вставить в суще- 
ствующие классы РНР или базу данных МузЗОГ для возврата данных от 
подзапросов. Расширяемая структура элементов управления позволяет лег- 
ко создавать дополнительные Јауа$сгірі-объекты (правда, по мнению автора, 
это требует определенных усилий). 
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\ахАзрес{5$ 


Бесплатное использование с указанием первоисточника 

1 ://а]лахазрес{$.6105$ро{.сот 

Представляет собой процессор, использующий модули доступа ЈауаЅсгірі для 
зызова серверных методов У№еБ-служб. Для связи клиента и сервера приме- 
няются стандартные средства ЗОАР и УЗОГ. В качестве параметров и воз- 
зращаемых значений допускается использование простых типов и объектов 
КМЕ. Кроме того, продукт поддерживает кэширование и очередь действий. 


^ахСайег 

Майкл Мехемофф (Мсйае! Майетой), 2005 

Продукт с открытым исходным кодом 

1 р://алаху.сот/гип Де{АдлахСаПег 

Интерфейсный объект с многопоточной поддержкой ХМЕНИрКеаие$. Пред- 
назначен в основном для начинающих пользователей Ајах. В настоящее вре- 
мя продукт находится в стадии разработки; доступна альфа-версия; постав- 
пяется только с демоверсией приложения "живого" поиска АјахРайегпѕ. Раз- 
работан согласно принципам КЕЗТ. 


АЈахҒасеѕ 


Продукт с открытым исходным кодом (АЕ) 
Һ‹р://туѓасеѕ.арасће,оге/ 

Экспериментальная реализация ЈауаЅегүег Ғасеѕ с поддержкой Ајах от 
АрасВе. 


ВаскВаѕе 


Коммерческий продукт с общедоступной версией 
ћіёр://ууу.Баскбаѕе.сот 

Комплексная структура на основе браузера, поддерживающая богатые функ- 
циональные возможности браузера, а также интеграцию с .МЕТ- и Лауа- 
кодом. ВаскВаѕе предлагает приложение ША (Кісһ Пиегпе АррПсайоп), ра- 
дикально повышающее практичность и эффективность интерактивных при- 
ложений, а также производительность разработчика. Используя ВаскВаѕе, 
вы можете создавать №ер-приложения с богатым и дружественным поль- 
зовательским интерфейсом. ВаскВазе предлагает разделение представления 
и логики с помощью специального пространства имен ХНТМГ. 


Веһаміоиг 

Вен Нолан (Веп №іап), 2005 

Продукт с открытым исходным кодом 
му№.гірсога. со. пх /Бећһауіоиг/ \ 


Действие Веһауіоџг основано на использовании селекторов С55 для добавле- 
ния ЈауаЅсгірі-кода к элементам РОМ. Вы создаете хэш селекторов и функ- 
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ций С55, принимающих элемент и добавляющих к нему обработчики собы- 
тий ЈауаЅсгірі (например, опсіісКк). Затем вы регистрируете эти правила на 
странице и сравниваете их с соответствующими элементами РОМ, после чего 
добавляете в документ код Јауа$Ѕсгірі. Этот код разработан таким образом, 
что вы можете рассматривать файлы правил как таблицы стилей (т.е. все, 
что нужно для их использования, — это включить их на страницу). Библио- 
тека Вепау1оиг предназначена для того, чтобы убрать громоздкую механику 
атрибутов опсі1іск и узлов сценария со страниц, чтобы они не запутывали ее 
содержимое. Благодаря своей организации библиотека достаточно удобна и 
может облегчить повторное использование вашего ЈауаЅсгірі-кода. 


Віпао\ммѕ 


Коммерческий продукт 

Уүү.біпаоуѕ.пеї 

Набор инструментальных средств разработки программного обеспечения 
(Ѕойуаге Оеуеюртеп Ки — 50К), позволяющий генерировать настолько 
богатые интерактивные Интернет-приложения, что они могут соперничать 
с современными настольными приложениями, реализованными с интенсив- 
ным использованием ОНТМГ, ЈауаЅсгірі, С55 и ХМЕ. Приложения Вш4о\з 
не требуют загрузки и установки на стороне пользователя, необходим только 
браузер (средства Јауа, ЕІаѕһ или АсйуеХ не используются). Віпӣоєуѕ пред- 
лагает богатый набор элементов управления окнами, а также встроенную 
поддержку ХМГ, ЗОАР и ХМГ-КРС. 


ВіџеЅһоеѕ 
Коммерческий продукт; имеется бесплатная версия 
уулт. о10оеѕһоеѕ.огд 


Богатый набор компонентов, включающий текстовый редактор МҮЅІМҮС 
и элемент управления электронными таблицами. 


СакеРНР 


Продукт с открытым исходным кодом 

Һёїр://сакерһр.оге/ 

Полный перенос продукта Киру оп Каіїѕ на платформу РНР с прекрасной 
поддержкой Ајах. 


СІ-Ајах 

Ричард Ньюмен (РКісһаға Мъ№Мемтап), 2005 

Продукт с открытым исходным кодом 

Һіёр://сіКкі. пеї/с1І-ајах 

Направляет вызовы ЈауаЅсгірі непосредственно серверным функциям 1158р; 


генерирует суррогат Јауа$Ѕсгірі; может обращаться к функциям ЈауаЅсгірі 
или объектам РОМ; может интегрироваться в ЗАЛАХ. 
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отѓогіА$Р.МЕТ 


Тредварительный выпуск коммерческого продукта; имеется бесплат- 
ая версия 

ҰҰ.дӢапіе1-7еі1ѕѕ.аӢе/СотѓоАЅР/ 

[редставляет подход, позволяющий разработчикам использовать чистое про- 
раммирование АЗР.МЕТ для получения возможностей в стиле Ајах. Для 
еализации этих возможностей СотЮцЦАЗР.МЕТ использует Ајах (ОНТМГ, 
ауа$Ѕсгірё, ХМІ, НТТР), но У№еБ-разработчики пишут только серверный код 
.ЅР.М№ЕТ. 


ооіеѕї ОНТМІ Саепааг 

Тродукт с открытым исходным кодом с коммерческой поддержкой 
уу.ЯӢупагсһ.сот/ргојесіѕ/саіепааг/ 

[встраиваемый компонент-календарь Јауа$сгірі; может применяться для 
юрмирования раскрывающихся списков, стиль которых определяется с по- 
ющью С8$. 


;РАІМТ 

3гоѕѕ-Ріаїогт Аѕупсһгопоиѕ Іпіегѓасе Тооікії) 

Тродукт с открытым исходным кодом (СРЕ и ГОРЕ) 
Ир://сра1тЕ.зоигсегРогзе. пет 

"трогая реализация Ајах и ]ЗК$ (ЈауаЅсгірі Кетоѓе Ѕсгірііпе), поддержива- 
>щая РНР и АЅР/УВЅсгірё. СРАТЧТ предлагает код, требуемый для реали- 
ации Ајах и Ј5К5 на сервере, когда возвращаемые данные обрабатываются, 
Форматируются и отображаются на стороне клиента с помощью. ЈауаЅсгірі. 
>лагодаря этому можно написать приложение, предлагающее пользователю 
чень быструю обратную связь. 


)ојо 

мекс Рассел (АШех Виѕѕе), 2004 

Тродукт с открытым исходным кодом 

1р://аӢојоїоо1ІКії. оге 

Іредлагает несколько библиотек для использования с Ајах, включая элемен- 
ы управления окнами, модель событий и передачу сообщений с использова- 
[ием ХМІ.НирКедиеѕі и другие технологии. Поддерживает ЈауаЅсгірі в №ер- 


раузере. 


МА (Оігесї Меб Ветойпд) 

Тродукт с открытым исходным кодом (Арасће) 
уу.веѓаһеаа.ка.ик/ауг 

)болочка для вызова методов Јауа непосредственно из ЈауаЅсгірі-кода. По- 


добно ЗАЛАХ, она может передавать вызовы от ЈауаЅсгірі-кода методам Јауа, 
1 затем возвращаться к обратным вызовам ЈауаЅсгірі Ее можно использо- 
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вать с любой М№еб-структурой (например, 5ги{5 или Іареѕігу), поддерживаю- 
щей философию КІЅ8/РОЈО в стиле Ѕргіпе. Данный продукт планировалось 
включить в следующую версию структуры ОрепЅутрһопу Уеб У№огк$. 


ЕсНо 2 
Продукт с открытым исходным кодом (МРГ или СРГ.) 
у\у\.пехарр-сот/ргодис/есво2 


Есһо 2 позволяет кодировать приложения Ајах на Јауа, автоматически ге- 
нерировать НТМГ- и ЈауаЅсгірі-код, а также координировать поток сообще- 
ний между браузером и сервером. Предлагает передачу сообщений в фор- 
мате ХМГ. Если требуется, разработчик может вручную писать ЈауаЅсгірі- 
компоненты. 


т) 
Продукт с открытым исходным кодом 
ћір://Ет.аері-7.сот/ 


Представляет собой основанную на .МЕТ библиотеку базового класса ЕС- 
МА$спрЕ. Предполагается, что данный продукт станет основой нового поко- 
ления УеБ-приложений, основанных на браузере. 


ҒСКЕайќог 

Продукт с открытым исходным кодом 

муүү.Ёскеаіќог.пеѓ 

Богатый ҸҮЅІМҮС-редактор; может загружаться в текстовую область 
НТМЕ с помощью одной строки ЈауаЅсгірі-кода, что позволяет легко интегри- 
ровать его в существующие М№еБ-приложения, системы СМ$, энциклопедии 
и т.п. По своим функциональным возможностям очень похож на ТіпуМ СЕ. 


НазН Јама5сгірі Іпїедгайоп КЇЇ 

Продукт с открытым исходным кодом 
ууү.оѕ#аѕһ.оге/аоки.рһр?іа=йаѕһјѕ 

Данный продукт разрешает смешивание кода ЈауаЅсгірі и Е1аѕһ; вызов функ- 


ций Асіоп$стгірі из ЈауаЅсгірі-кода и наоборот. Между двумя средами допус- 
кается передача данных всех основных типов. 


Сооде Ајах5іТ 

Продукт с открытым исходным кодом (В.П) 

һіср://воов-ај ахѕіё.ѕоигсеѓогве.пеї 

Продукт создан инновационной компанией-производителем приложений по- 


иска СоовІе. Представляет собой ЈауаЅсгірі-оболочку для выполнения ХЅІЛТ- 
преобразований и запросов ХРа{®. Разработан в ходе работы над Соое Мар. 
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Зиіѕе 

Коммерческий продукт; имеется бесплатная версия 

• тү.јауариіѕе.сот 

Серверная компонентная модель на основе Јауа (чем-то похожа на ЈЅЕ, но 
троще). В настоящее время для улучшения оперативности в продукт вклю- 
чается поддержка Ајах. 


НТМІНӯрВеаиеѕї 


Ангус Тернбул (Апвиѕ ТитБиЙ), 2005 

Продукт с открытым исходным кодом (ГОРЕ) 

{Блу буіпһе1іх.сот/Јауа$сгірі/һтіһргедиеѕі/ 

Простая оболочка для удаленных сценариев. Для улучшения совместимости 
дспользует ХМТНИрКеаие$ и ТЕгатез. 


піегасіме \Мебзйе Ргатемогк 

Продукт с открытым исходным кодом 

166р:/ /ѕоигсеѓогве.пеїі/ргојесіѕ /ім#/ 

Проект, цель которого — поддержка в браузере различных аспектов инфра- 
структуры Ајах. Описывается авторами как каркас для создания интерактив- 
ных М№еБ-сайтов с использованием ЈауаЅсгірі, С955, ХМІ. и НТМІ. Включает 
специальный компонент ХМГ-разбора, позволяющий получать в удобном ви- 
це читаемый Јауа$сгірі-код. Содержит все необходимое для разработки \5- 
:айтов на основе Ајах и традиционных сценариев. Предлагает многопоточную 
реализацию ХМЕНИрКеаие$( и интерфейсную оболочку для РОМ, повышаю- 
щую читаемость кода. й 


Јаскре 

Коммерческий продукт 

*ууүү.јаскъе.сот/ѕоіиііопѕ/аеуеіортепі. һіті1 

Набор элементов управления окнами богатого клиента Ајах; может встра- 


иваться в любое промежуточное программное обеспечение, например АЅР-, 
Јауа-, .МЕТ- или РНР-код. 


ЈРЅрап 
Продукт с открытым исходным кодом (РНР) 
ир:/ /јрѕрап.ѕоигсеѓогве.пеї/мікі/аоки.рһр 


ЈРЅрап передает вызовы Јауа$сгірі непосредственно функциям РНР. В насто- 
ящее время выполняется интенсивное тестирование компонентов продукта. 
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јѕо1аії 

Продукт с открытым исходным кодом (ПРІ) 

Һер: / /јѕо1Іаіг. пеї 

Набор библиотек ЈауаЅсгірі с открытым исходным кодом, поддерживающий 
криптографию, сериализацию, десериализацию, ХМІ-КРС и ЈЅОМ-КРС. 


ЈЅОМ 

Продукт с открытым исходным кодом (большинство реализаций — 
ГСРЕ) 

улм\!] ѕоп-грс.огә/ 

ЈЅОМ — "обезжиренная ХМГ-альтернатива"; ]ЗОМ-КРС * - протокол уда- 
ленного вызова процедур, подобный ХМІ-КРС, с хорошей поддержкой 
Јауа8сгірі-клиентов. Существуют реализации для нескольких серверных язы- 
ков и платформ (в том числе Јауа, Руоп, Кобу и Реп). 


Ј5В5 (Чамазсир+ Ветоїе Зсир# по) 

Брент Эшли (Вгеи! АзШеу), 2000 

Продукт с открытым исходным кодом 
уүүү.аѕҺеуіё.сот/тѕ/јѕгѕ /еѕі. Һет 

Перенаправляет вызовы из ЈауаЅсгірі-кода в код, написанный на серверном 
языке, и обратно. Поддерживаемые браузеры: ТЕ 4+, М№еѓѕсаре 4.х, Мезсаре 


6.х, МохШа, Орета 7 и Саеоп. Поддерживаемые серверные языки: АЅР, Со!а- 
Еоѕіоп, РегіССО1, РНР, РуШоп и ЈЅР (сервлеты). 


ЦЬХМІНЕрВеаиеѕї 


Стефан В. „Коте (іерһеп И’. Соаіе), 2003 

Доступен исходный код; продукт защищен авторскими правами 

ҮҮ .ууһііеѓгоѕі.сот /ѕегуІеі/соппесїіог? Ше=ге!егепсе/2003/06/17/И6Хпи 
Кедоеѕі. іт] 

"Тонкая" интерфейсная оболочка объекта ХМІ.НрКедиезѕі. 


Мосћікії 


Продукт с открытым исходным кодом (МТТ) 

Уи пос. сОот/ 

Набор библиотек с акцентом на входе в систему, визуальных эффектах, асин- 
хронном управлении задачами, форматировании даты/времени, включаю- 
щий интерфейс "безболезненной" работы с РОМ. Для представления РОМ 
использует встроенные объекты Аггау ЈауаЅсгірі и форму записи в стиле 
ЈЅОМ. 
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пеїМ/іпаомѕ 


Продукт с открытым исходным кодом 

угүуүу.пеіууіпаомѕ.оге, 

Реализация в браузере полной среды рабочего стола/окон ОНТМГ. Код в ос- 
новном написан согласно существующим стандартам, специфические особен- 
ности браузеров не используются. Содержит реализацию обмена сообщения- 
ми с использованием сигналов и слотов, смоделированную на основе элемен- 
тов управления Ої (ТгоШесһ) и языка ЗтаЩа\Ж. Существует в виде отдельной 
библиотеки. 


Оаароѕії 


Коммерческий продукт 
ууү%Ұү.оаароѕі.сот 
Набор элементов управления окнами Јауа$сгірі; включает богатый полно- 


функциональный клиент электронной почты. В настоящий момент является 
частью Үаһоо!. 


ОрепВісо 

Билл Скотт (Ві 5сой), Даррен Джеймс (Рағғеп Јатеѕ), 2005 
Продукт с открытым исходным кодом 

БИр://ореп!1со.ог2 

Многоцелевая структура с поддержкой Ајах. Основной акцент делается на 
поддержке таких элементов пользовательского интерфейса, как анимация, 
отделение содержимого от логики с помощью линий поведения, перетаскива- 
ние; имеется ряд встроенных элементов управления окнами. Разрабатывается 
при поддержке Ѕабге Аігіпе Ѕоіџіопѕ на основе Ргоофуре. 


Ргадтаійс Објесіѕ 

Продукт с открытым исходным кодом 

11р: / /ргартаїісобјесіѕ. сот/ргойисіѕ . Вет] 

Входящий в продукт компонент \№еБСопігоїѕ представляет собой набор биб- 
лиотек дескрипторов ЈЅР, направленных на обогащение У№еБ-приложений на 
эснове Јауа. В противоположность богатым, но "толстым" У\№еБ-приложениям, 
тонкое" \№Мер-приложение состоит только из набора НТМГ-страниц с кодом 
Тауазсире и С85, которые визуализируются браузерами. Текущая реализация 
состоит из панели просмотра, элемента управления древовидной структурой 
л панели управления. 


Ргхдоуре 


Сэм Стефенсон (ат .5їерһепѕоп), 2004 
Продукт с открытым исходным кодом 
1 (р://рготофуре.соп1о.пеЕ/ 


структура ЈауаЅсгірі, предназначенная для ВТА-разработки. Включает фун- 


Приложение В Библиотеки А/ах 635 


даментальную библиотеку Ајах и набор инструментов для упрощения ее ис- 
пользования. Представляет собой процессор ЈауаЅсгірі для Кибу оп Кац}, 
В!со и Ѕсгірѓасшоиџѕ. Код ЈауаЅсгірі генерируется с помощью Кибу оп Кац}, 
однако потом его можно использовать и в других средах. 


Ооохаоо 


Продукт с открытым исходным кодом (ГОРЕ) 
ВИр://аоох4оо.зоигсегогде. пет 

Библиотека пользовательского интерфейса Ајах с богатым набором встро- 
енных компонентов и хорошо продуманной структурой. Включает элементы 
управления окнами и структурой. В качестве поддержки разработки предла- 
гает таймеры для профилей и отладчик. 


АЗЩе 


Бренга Эшли (Вғепі Аѕћеу), до 2000 
м№ү№.аѕһеуіё.сот/тѕ/таіп.һіёт 


Простой компонент, выпущенный как часть более сложной работы Брента 
Эшли Кетое Ѕсгірііпе (см. выше раздел, посвященный ЈЅК). 


Виру оп Вай$ 


Дэвид Хейнемиер Хэнссон (Рая Неіпетеіеғ Напѕѕоп), 2004 
Продукт с открытым исходным кодом (МГГ) 
му\и.габуопга|$.оге 


Общая основа для У\еБ-разработки с хорошей поддержкой Ајах. На время на- 
чала Ајах-бума продукт находился в стадии разработки, поэтому становление 
Кобу оп Каз происходило под сильным влиянием технологий Ајах. Генери- 
рует большую часть (если не весь) ЈауаЅсгірі-кода для элементов управления 
окнами и анимации в браузере. Поддерживает планирование задач. Чтобы по- 
лучить понятный и прямолинейный подход, авторы отказались от избыточно- 
го и всеобъемлющего продукта. Результат стал любимым средством многих 
Јауа-разработчиков. В данной книге Кибу оп Каіѕ использовался в основ- 
ном из-за хорошей поддержки Ајах. В настоящий момент в продукт входят 
Ргоѓоѓуре и Ѕсгіріасшоиѕ. 


Заск 


Продукт с открытым исходным кодом (модифицированный МІТ/ХІ1) 
Вр: / /ёмііеһёопіуетѕе.сот/2 005/05/заск-о{-а]ах 

"Тонкая" интерфейсная оболочка объекта ХМГНиИрКеаие$. Позволяет вы- 
зывающей стороне задавать функцию или объект РОМ обратного вызова. 


С помощью ОМ обратного вызова текст ответа помещается непосредствен- 
но в О0М. 
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ЅАЈАХ 

Продукт с открытым исходным кодом 

ууүүүу.тоаегптеіһоа.сот/ѕај ах 

ЗАЈАХ направляет вызовы из ЈауаЅсгірі-кода в код, написанный на сервер- 
ном языке, и обратно. Например, вызов метода ЈауаЅсгірі х _ саісшаѓеВоағеї () 
направится на сервер и вызовет метод Јауа саІсшаѓеВиавеї (), затем вернет 
в х саісшаѓеВийвеї сь() значение в виде ЈауаЅсгірі-кода. Продукт облег- 
чает отображение суррогатной функции ЈауаЅсгірі в действие на сервере. 


Может направлять вызовы на различные серверные платформы: АЅР, Со!а- 
Еоѕіоп, Іо, Іа, Рег, РНР, Руфоп и Кобу. 


Зайзза 

Продукт с открытым исходным кодом (СРЕ и ГОРЕ) 
ВИр://заг1з5а.5Р.пеё 

АРІ Јауа$Ѕсгірі, инкапсулирующий функциональные возможности ХМІ в вы- 
зовы, которые зависят от браузера. Поддерживает различные технологии 
ХМГ, включая запросы ХРай, ХЅІТ и сериализацию объектов Јауа5сгірі 
в ХМІ. независимо от браузера. 


Ѕсгірїасиіоиѕ 


Томас Фукс (Тлотаѕ Ғисћѕ), 2004 

Продукт с открытым исходным кодом 

Һёёр://ѕсгіріё.асшо.иѕ 

Библиотека визуальных эффектов с хорошей документацией, созданная с 
помощью ЈауаЅсгірі на основе Ргоѓоѓуре. Включает демонстрации, примеры 
приложений и переносную библиотеку. 


ЭЛАТО 


Продукт с открытым исходным кодом (АР) 
БИр://з\мато.Аеу.]ауа.пе* 

ЗУУАТО (ый У№еБ Аррісайоп ТО...) представляет собой набор повторно ис- 
пользуемых интегрированных библиотек Јауа/ЈауаЅсгірі, позволяющих легко 
переносить взаимодействие №еб-приложений на фундамент Ајах. Серверная 
библиотека Лауа может развертываться во всех контейнерах, совместимых с 
ЅегуІеі 2.3+. Клиентская библиотека ЈауаЅсгірі работает в браузерах, под- 
держивающих ХМГНиИрКеаиез. Для упорядочения данных РОЈО на стороне 
сервера используется ]ЗОМ, поэтому для удаленного доступа к данным в 
любой ЈауаЅсгірі-среде (НТМГ, ХОГ, УС) требуется всего лишь закоди- 
ровать нужные действия или интегрировать их с готовыми библиотеками 
Јауа$сгірі. Продукт поставляется с несколькими автономными компонента- 
ми (Ащю-сошр&е ТехФох, Шуе Богт, Глуе 118 и т.д.), которые помогают 
быстро разрабатывать У\еБ-приложения. 


Приложение В. Библиотеки Ајах 637 


Тіреї 
Коммерческий продукт 
ммм .іесһпісаіригѕиіё. сот 

Предназначен для получения переносимого и понятного АРІ ЈауаЅсгірі. 
Поддерживает стандарты М№еб-служб (ЗОАР и ХМГ-КРС); имеет встроенную 
поддержку нескольких популярных УеБ-служб (Соое, Ататоп и ЈаБбег). 
Включает интегрированную среду разработки, написанную на ЈауаЅсгірї. 


ТпуМСЕ 

Продукт с открытым исходным кодом, коммерческой поддержкой и 
несколькими запатентованными модулями 
БИр://ипутсе.тожмесо4е.сот/ 

Богатый МҮЅІҰҮС-редактор; может загружаться в текстовую область 
НТМЕ с помощью одной строки ЈауаЅсгірі-кода, что позволяет легко интегри- 
ровать его в существующие УеБ-приложения, системы СМ$, энциклопедии 
и т.п. По своим функциональным возможностям очень похож на ЕСКЕЧ4Иог. 


ТитРа@й Тетраез 

Продукт с открытым исходным кодом 

һр: //ігітраёћ.сот/ргојесі/мікі/Јауа$сгіріТетрі1аѓеѕ 

Процессор образов Јауа$сгірі для соединения в браузере данных и представ- 
ления. 


Үаіїег 2огп'ѕ ОНТМЕ Ибгайез$ 


Продукт с открытым исходным кодом 
ууу. ма[еттогп.сот/шаех. Вит 


Предлагает поддержку перетаскивания и векторной графики (линии и кри- 
вые), используя в качестве пикселей элементы іу. 


\МебоВВ Гог .МЕТ 
Коммерческий продукт; имеется бесплатная версия 
уму Шепиат1еМсодет$.сот/\меБотЬ/аБоц \еБотЬ.В ит 


Платформа для разработки богатых клиентских приложений Ајах и Еаѕһ 
с возможностью их последующего объединения с объектами .МЕТ и \- 
службами ХМГ. 


\МебОВВ їог Јама 
Коммерческий продукт; имеется бесплатная/общедоступная версия 
муу .ћҺетіапівһісодетгѕ.сот/уебогЬ/абошМеБогЬ.һіт 


Платформа для разработки богатых клиентских приложений Ајах и Еаѕһ 
с возможностью их последующего объединения с объектами Лауа и МеБ- 
службами ХМГ. Включает клиентскую библиотеку Ес! Сіепі Зумет 
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(уу. ћетіапівһісоаегѕ, сот/гсэ/іпӣех.һіт), которая предлагает простой 
(в одну строку) АРІ, позволяющий связываться с любым методом любого 
объекта Лауа, \еб-службы ХМГЕ или Ещегрг!зе ЛауаВеап. Предлагает специ- 
альный АРІ для обработки результатов запросов базы данных; серверный код 
может возвращать элементы ПаїѓаЅеїѕ или ЮаѓаТаЫеѕ, а клиент представит 
их как специальный объект ЈауаЅсгірі Кесогаіѕеї. Данный объект позволяет 
извлекать названия столбцов и построчные данные. 


х 
Майте Фостер (Міке Ғоѕіеғ), 2005 

Продукт с открытым исходным кодом 

улм\м/.сго$$-Бго\узег. сот 

Классическая библиотека ОНТМГ, предлагающая поддержку в различных 
браузерах анимации, стилевого оформления, событий и других распростра- 
ненных функциональных возможностей. 


ХАЈАХ 

Дою. Макс Уилсон (Ј. Мах И/1ѕоп), 2005 / 
Продукт с открытым исходным кодом 

Һігр://хајах.ѕҒ.пеї 

Передает вызовы ЈауаЅсгірі непосредственно функциям РНР. Для вызова 
сценария РНР использует суррогат ЈауаЅсгірї. 


х-"ЮОеѕкіор 


Продукт с открытым исходным кодом (СӘРІ) 

уулу .х-ае5Кор.ог®/ 

Проект включает библиотеку для разработки "тонких" клиентских приложе- 
ний с использованием браузера. Помогает разработчикам создавать графиче- 
ские интерфейсы для приложений глобальных, внутренних и внешних сетей. 
Для работы продукта не требуются никакие модули, необходим только брау- 
зер. Поддерживает все операционные системы с браузером РОМ 2/ЈауаЅсгірі; 
предлагает простой интерфейс с хорошей документацией; имеет настраивае- 
мые сменные оболочки. 


ХНСопп 


Вред Фульц (Вғаа РиЙ$), 2005 
БЕСр: //хКкг.иѕ/соде/Јауаѕсгірі /ХНСопп 
"Тонкая" интерфейсная оболочка объекта ХМІНієрКеаиџеѕі. 
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ш, Дейв, Паскарслло, Эрик, Джеймс, Даррен. 


Ајах в действии. : Пер. с англ. —- М. : Издательский дом "Вильяме", 2006. — 640 с. : 
ил. — Парал. тит. англ. 


1$ВМ 5-8459-1034-Х (рус.) 


В этой книге описан новый подход к созданию \№е-приложений, известный как Ајах. Авторы 
осматривают составные части Ајах: ЈауаЅсгірі, С55, РОМ и объект ХМІ.НіірВедиеѕі. Кроме 
по, в книге нашли отражение вопросы управления кодом, взаимодействия клиента и сервера 
применения архитектуры "модель-представленис-коцтроллер" на разных уровнях приложения, 
ататель также найдет сведения о защите и производительности — важных характеристиках, су- 
ественно влияющих на популярность любого продукта. Рассматриваемые вопросы иллюстриру- 
гся примерами практического использования Ајах. В приложениях содержится дополнительная 
формация об инструментальных средствах, о языке ЈауаЅсгірі и библиотеках. Материал книги 
ложен на высоком уровне и будет полезен спеииалистам высокой и средней квалификации. 


ББК 32.973.26-018.2.75 
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и какими бы то ни было средствами, будь то электронные или механические, включая фотокопирование 
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